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

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.

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? :slight_smile:

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.

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.

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.