Any ideas for a solid double background that is cross compatible?

[mguise]

I’m trying to build a background on my website and I am having trouble with the way I have the CSS set up. You can see what I have built so far here.

http://www.webskillsplus.com/packwood/index.php

Take a look at the attached image and you can see what I am trying to accomplish. I would like a red bar to run horizontally behind the page.

I tried messing with the z index with an absolute position but I couldn’t get it to work.

I tried doing the following and it isn’t working either.

html {
	background: #ccc url(../img/dice_slice.jpg);
	background-repeat: repeat-y;
}
body {
	margin: 0;
	background-color: #b87431;
	background-image: url(../img/massageservices.jpg);
	background-position:center;
	background-repeat: no-repeat;
}

Anyone have any ideas? Thanks in advance for your help.

[RyanReese]

I can't see hte image yet (could you just upload it, for example, on tinypic.com, and paste hte link here?), but it seems you already have a red bar running horizontally through the page?

[mguise]

Hi RyanReese. Thanks for responding. Okay, you can see the image here . I do have the red bar going across but you will see in the image I am trying to get a repeat-y background going behind it. I am not sure how to make it work. Thanks for any help.

[RyanReese]

If you want the images to extend however far the content is, you can't use HTMl/Body for the images.

You need to (for full support) make another wrapping element. On that wrapping element, put the yellowish repeating-y image. On your inner wrapping element (the one you currently have now), put the red strip, and position accordingly.

[deathshadow60]

Ryan's on the right track, and if you put the div for that second background first in your markup -- as a empty DIV, absolute position it, then set position:relative on the outer wrapper for your content, you won't need to set z-index, it should depth sort over it automatically. If that red box is going to be at a fixed height, you could even skip absolute positioning and simply set it's height, set the tiled image to the bottom of the div, and then negative-margin that height away.