Applying Multiple Overlapping Background Images

Question

I'm working on building a design that I'm not 100% sure how to carry out. Here's a really rough example of it.

http://jsfiddle.net/cgRyH/1/

Essentially, I need a simple background texture to repeat horizontally into infinity. On top of that, beneath my content, I need to add some accents to the background that are a bit wider than the divs that hold my content. In my example I've accomplished this with a div that's only purpose is to add this additional background image...but this seems clunky.

Is there a better way of accomplishing this?

Edit: My white footer needs to appear to stretch to the bottom and both sides of the screen.

Answer 1

It is possible using CSS3. It is pretty well supported, except, as usual, in the IE family where it did not appear until IE9.

http://www.css3.info/preview/multiple-backgrounds/

Besides that, the way you are doing it is ideal.

Answer 2

A few comments:

When you are trying to have a dimension which continues "to infinity" then usually there is a calculation involved (javascript), because if a scrollbar exists, then 100% will not cover the entirety of the screen. However, there is a neat css trick when using a image which will stretch it automatically for you, background-size: cover;. I have incorporated this into the fiddle as an example. I also added something for the footer with css. As a result of not having javascript available, this example uses a div the size of the whole screen at a lower z-index value in order to provide the footer background color. To make the footer stand out, I have highlighted it with a black background and a white color for the text. You can go in and change them to the inverse (which is what you wanted) but for the sake of display I used more contrast so you could see the effect.

Here is the example: http://jsfiddle.net/cgRyH/2/