Apply multiple overlapping background images

Question

I am working on creating a design that I am not 100% sure how to perform. Here is a truly exemplary example.

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

Essentially, I need a simple background texture to repeat horizontally to infinity. Also, under my content, I need to add a few accents to the background, which are slightly wider than the divs that contain my content. In my example, I accomplished this with a div whose purpose is to add this extra background image ... but this seems awkward.

Is there a better way to do this?

Edit: my white footer should appear to stretch to the bottom and both sides of the screen.

Answer 1

Possible use of CSS3. It is pretty well supported, except, as usual, in the IE family, where it didn't appear before IE9.

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

In addition, the way you do this is perfect.

Answer 2

A few comments:

When you try to have a dimension that continues “ad infinitum” then javascript is usually used, because if there is a scroll bar, then 100% does not cover the entire screen. However, when using an image that will stretch it automatically, there is a neat trick css background-size: cover; . I included this in the violin as an example. I also added something for the footer using css. As a result of the lack of javascript, this example uses a div to fit the entire screen at a lower z-index value to provide a background color for the footer. To highlight the footer, I highlighted it with a black background and white text. You can enter and reverse them (which you would like), but for display I used more contrast so you can see the effect.

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