Div Background Image won't appear

[jdane416]

I've read through every post I could find and I can't figure this out. The background image for my div won't appear. I know the image is there too.

Also, I want this div that the background image is on to be 100%. Is there anyway I can set this individual to a height of 100% so that the bg image goes all the way to the bottom of the browser? Thanks.

Here is how I would like it to look:


url: http://www.tadanet.com/test/index.html

source:

#contents {
	top: 87px;
	left: 177px;
	height: 600px;
	width: 178px;
	position: absolute;
	background-image: url(imgs/contents_bg.gif) repeat;
}

[Chuckie]

I'm not 100 percent I understand what you are trying to do..

Have you considered positioning it with css?

background:#386984 no-repeat url(images/header.jpg) 0% 0%;

Chuck

[Paul O'B]

Is there anyway I can set this individual to a height of 100%

See my faq on 100% height to understand the problems and concepts.

You will be unable to specify 100% unless the parent has a height that is not in percent also unless you use the body as mentioned in the faq.

To achieve your 100% image you would need to be creative and wrap your page in a 100% high container (see FAQ) and repeat the image down that container or alternatively repeat the image down the body at the cotrrect horizontal position. If you look at the three col demo thread you will see examples of 100% high repeated images.

You cannot repeat the image in the current container because it will not inherit 100% height and if it did it would be 100% of the viewport and not just to the bottom.

The easiest solution for a continuos image is to repeat it on the body and then just carefully place your elements over it. Or use a 100% high container (as you can only use one due to inheritance issues).

Paul

[jdane416]

Thanks for the help Paul. I'm gonna check out that FAQ