placing 2 images on body

knowram · October 15, 2007

I have 2 images that would like to use as a background. The first is going to be used to bake a simple bar at the top of the page. I want this bar to cover the full width of the page and up to the top. Te second is the background image which I want to place under the bar and in the upper left corner.

These are the things I have tried

body{
background-image: url('Images/head.png');
background-repeat: repeat-x;
}

bground{
background-image: url('Images/background_compass.gif');
background-repeat: no-repeat;
}

As expected I only see the second image.

body{
background-image: url('Images/head.png');
background-repeat: repeat-x;
}

div.body{
background-image: url('Images/background_compass.gif');
background-repeat: no-repeat;
}
<body link="black" vlink="black" alink="black">
	<div class="body">
	<br>
	hello</div>
</body>
</html>

the compass.gif image is on top of the head image and doesn't go all the way to the edge of the page.

div.body{
background-image: url('Images/head.png');
background-repeat: repeat-x;
}

body{
background-image: url('Images/background_compass.gif');
background-repeat: no-repeat;
}

<body link="black" vlink="black" alink="black">
	<div class="body">
	<br>
	hello</div>
</body>
</html>

This is the closest I could get. The images are in the right order but there is a gap between the head image and the top and sides of the page.

Any ideas? there must be a way to do this.

Thanks

SuperBlue · October 15, 2007

Just a guess, try "margin:0;padding:0;" on the body.

As far as i know its still not possible to place two background images on the same element, you could fake it by creating a wrapper with "width:100%;height:100%;" and place the images in two separate divs. I.E footer and header.

dbrimlow · October 16, 2007

Here is why the first try didn't work: "bground" is not a valid tag - make it an id "#bground"or class ".bground".

Possible solution to 2nd attempt (I used css shorthand for the entire "background" instead of listing each separately) - make div.body an id selector instead of class (you only use it once per page) set the positioning of both backgrounds to "top left". Designate the 100% width of the body tag and designate the width and height of compass.gif as the width and height of the #body. Last and most important, set #body margin-top to 1px more than the height of the head.png height.

What you want is for the #body to have a margin from the top of the window that equals slightly more than the height of head.png:

body{
background: url('Images/head.png') top left repeat-x;
width:100%;
margin:0;
}

#body{
background: url('Images/background_compass.gif') top left no-repeat;
width:whatever background_compass.gif is.px;
height:whatever background_compass.gif is.px;
margin-top:whatever head.png height is plus 1px
}

And, while you are using css, lose the old markup level body links color tags! Designate the link colors with css - add a hover color change so visiters know they are selecting the right link (always designate links in the following order - a:link, a:visited then a:hover, a:active:

a:link, a:visited {color:#000000}
a:hover, a:active {color:#800000}

But! CSS relies heavily on proper html structure and tag usage. You can have the perfect CSS that would otherwise work like a charm, but if you don't use a correct DOCTYPE, and you have errors or typos for ANY element within your body tags, the CSS will not work as intended.

Are you using a DOCTYPE? Or does your page begin with just an "html" tag?

Sign In

placing 2 images on body

Recommended Posts

knowram

Link to comment

Share on other sites

SuperBlue

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information