Multiple Images in CSS

HTML & CSS
1

My website has 3 images; 2 are the same through the sites but the 3rd one will be different on each page. I used the following for my 2 constant ones:

html {
background-image: url(images/Blue_Liquid_Bkgd.jpg);
background-attachment: fixed;
background-repeat: repeat;
}

body {
background-image: url(images/Love_Family.jpg);
background-repeat: no-repeat;
style=“float: left”;
width=“239”;
height=“310”;
}

I can’t figure out how to code the 3rd one in CSS and then in the HTML. Anything I try either doesn’t show up or changes all my formatting. Any help would be greatly appreciated. Thanks.

2

you are forgetting the square brackets around home ([home])…

3

I tried both suggestions but neither is working. This is what I put in for my CSS and HTML:

CSS:
home {
background-image: url(images/John_Hopkins_Univ.gif);
background-repeat: no-repeat;
style=“float: center”;
width=“239”;
height=“310”;
}

HTML:
<body><div id=“container” page=“home”></div></body>

4

Place a container DIV right after the BODY, with a “page” attribute. This will allow you to define a series of images depending on the page being viewed, for example:

HTML; <body><div id=“container” page=“home”></div></body>
CSS; [home] {
background-image:…
}

5

If I understood you correctly, you could apply an ID to the body where you plan to use the third image, something like this:

body#myThirdImage {
/* CSS code for the third image */
}

Also, the second rule you are showing us has an error in it. I see the following in there:

style=“float: left”;
width=“239”;
height=“310”;

6

Sorry, my bad, the rule should be [page=home]

With this technique you would be able to generate several backgrounds, depending on the page title:
[page=home] {}
[page=aboutus] {}
[page=contact] {}
…

7

[home] {
background-image: url(images/John_Hopkins_Univ.gif);
style=“float: center”;

<body><div id=“container” page=“home”></div></body>