background images. - Post ID 165185

Aug 9th, 2011 at 01:01 PM
User 1964159 Photo

Tonethemoan
Registered User
156 posts

Hello all,
With your usual expertise, I am sure someone will smile and say "Yes Tone - it's simple". My first attempt with HTML 5 and CSS3, i am attempting to build a site. I have read through the handbook with CC and also a couple of 'Sitepoint' books, but cannot see my question answered.
I have created an index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Mon, 08 Aug 2011 16:49:55 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>The Thatchers Tavern</title>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>

<div id="wrapper">
<header>
<img src="Images/top_banner.gif" width="1100" height="240" alt=""The Thatcher's Tavern, witth images of wine glasses, a thatcher and green foliage." title="" border="0" />
</header>
</body>
</div> <!--end wapper div-->
</html>

I have also created a style sheet:
/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */

body {
margin: 0;
padding: 0;
background-image: lake.jpg;
background-color: #B7D7FF;
font: small Helvetica, arial, sans-serif;
}
#wrapper {
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top:10px;
padding-bottom: 15px;
background-color: #FFFFFF;
}

So you see I have an 1,100 px container for the content and a colour works to fill the remainder of the screen on either side. I would like to put an image in this background portion, but leave the colour for slower browsers, or people with images turned off, BUT I don't know how to write the HTML. I assume it should be inside the boday tags, but not in my container tags ("wrapper") tags.
Any suggestions will be useful.
Thanks
Old Tone
tonethemoan
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
Aug 9th, 2011 at 01:22 PM
User 122279 Photo

Inger
Senior Advisor
14,461 posts

Hi Tony,

The background image is defined in the css, like this:

body {
margin: 0;
padding: 0;
background-image:url("Images/ lake.jpg");
background-color: #B7D7FF;
font: small Helvetica, arial, sans-serif;
}

...provided you keep the lake.jpg in a folder named Images (with a capital I).

If this is a small pic that is supposed to tile the background, you can leave it as it is, but if it's a large one, you may add a bit to that line:

background-image: (url: "Images/ lake.jpg") no-repeat;

Another thing: Check the alt tag for The thatcher's tavern... You have 2 double quotes there, one is enough. And there is a typo in 'witth'... :P

Yet another thing: If there is a font named small Helvetica, it has to be written with double quotes around it because it consists of two words. I don't know that font, but it may be such a font.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Aug 9th, 2011 at 03:14 PM
User 1964159 Photo

Tonethemoan
Registered User
156 posts

Thank you Inger, I shall atnd to it and the faults you have been kind enough to point out. I think I messed up by posting on this topic twice. I came back an hour after the first and despite a search, could not find my post.
Oh wel..........
tonethemoan
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
Aug 9th, 2011 at 03:17 PM
User 122279 Photo

Inger
Senior Advisor
14,461 posts

I just added some lines to my post above...
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Aug 9th, 2011 at 04:08 PM
User 1964159 Photo

Tonethemoan
Registered User
156 posts

Sorry inger - it doesn't work. The background colour changes when I set a new hex, but no sign of the background image.
Here is the latest code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Mon, 08 Aug 2011 16:49:55 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>The Thatchers Tavern</title>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
<header>
<img src="Images/top_banner.gif" width="1100" height="240" alt="Images of a thatcher, some glasses and the words - The Thatchers Tavern." title="" border="0" />
</header>
</body>
</div> <!--end wapper div-->
</html>
and the CSS:
/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */

body {
margin: 0;
padding: 0;
background-image: (url: "Images/lake.jpg");
background-color: #408080;
font: small Helvetica, arial, sans-serif;
}
#wrapper {
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top:10px;
padding-bottom: 15px;
background-color: #FFFFFF;

Very wierd!
}
Tony
tonethemoan
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
Aug 9th, 2011 at 04:39 PM
User 122279 Photo

Inger
Senior Advisor
14,461 posts

Sorry, my fault, I made a mistake. The correct syntax is:

background-image: url("Images/lake.jpg");

I have corrected my post with the wrong css above here.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Aug 10th, 2011 at 03:41 AM
User 1964159 Photo

Tonethemoan
Registered User
156 posts

Ah great, Inger, it works. Yhank you. I'm starting to think learning about HTML5 and CSS3 is well worth the effort.
By the way, QES journal Quest, should be arriving in a couple of days.
All the best
Tony
tonethemoan
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.