Body background image

HTML & CSS
1

Im struggling to get a body background image to show! I have Large image background, that is in a div in the html. Here is the CSS and html:


#background { 
	width:100%;
	height:100%;	 
	position:absolute; 
	left:0; 
	top:0; 
	z-index:-999; 
}

#background img{
	width:100%; 
	height:100%; 
	position:fixed;
	left:0; 
	top:0;	 
}



<div id="background">
  <img id="background_img" src="images/site/home/architecture.jpg" alt="#Url.gallery#">
</div>

This div is outside any of the other containers and is displayed well. Now I would like to have a background image (a small colored Line) on the far right hand side showing over the large image background. I tried to apply it to the body tag like this:


body {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 100%;
	line-height: 120%;
	color: #FFF;
	position: relative;
	z-index: 1;
	background: url(../images/site/wrapper.gif) 100% 0 repeat-y;
}

But it doesn’t show. When refreshing the page you see its there. You might ask why I’m not applying the background image to my wrapper! That is because I already have a background image for the 100% height wrapper:


#wrapper {
	width: 983px;
	min-height: 100%;
	font-size: .8125em;
	background: url(../images/site/sidebar.png) 50px 0 repeat-y;
	potition: relative;
	z-index: 1;
}

What other options do I have to have that image (a small 10px width line ) on the right hand side with a 100% height?

Thank you in advance!

2

Could you maybe post a live link and/or a screen shot?

3

Hi Ralph,

Here is a screenshot of the layout I’m after. The transparant sidebar is the background I used on the wrapper:


#wrapper {
	width: 983px;
	min-height: 100%;
	position: relative;
	float: left;
	z-index: 1;	
	font-size: .8125em;
	background: url(../images/site/sidebar.png) 50px 0 repeat-y;
}

* html #wrapper {
	height: 100%;	
}

Like I said I tried the yellow and green image right as property of the body tag but that isn’t working.

4

But it doesn’t show. When refreshing the page you see its there. You might ask why I’m not applying the background image to my wrapper! That is because I already have a background image for the 100% height wrapper:

The image on the body won’t show because it is behind any content on the page. You can’t move a background behind the body.

Just nest an empty div and give it the same rules as your image but place it on the right.


#border{
	width:10px; 
	position:fixed;
	right:0; 
	top:0;
       bottom:0;
    background:url(img.gif) repeat-y 0 0;
z-index:99;
}



<div id="background">
  <img id="background_img" src="images/site/home/architecture.jpg" alt="#Url.gallery#">
<div id="border"></div>
</div>

(I assume you know position;fixed doesn’t work in IE6)