Best way to make a feature strip background with CSS?

Question

I was wondering what would be the best way to create a feature strip of background in a website layout?

The approach that comes to mind, would be to create an absolute positioned div with a z-index of -1 and adjust top/height to match up behind a fixed layout.

Is this a good way to go about it? Or is there a better way?

Thank you for any help! :D

Answer 1

A more semantic approach would be to apply the background strip to an element on the page -- in the case of your example, the "slideshow" element. This element's outer constraint (whether that be a div, a ul, or something else) can then be stretched to 100% of the width of the page, and the content of the element centered (or positioned as desired).

This approach would be more maintainable than some other approaches -- content could be added before the element without breaking the layout, the strip could be changed without much effort, etc.

Background scaling could be taken care of in several ways:

1. Make your background big enough that it isn't likely to ever be a problem.
2. Use a tile-able background.
3. Use CSS3 background-size property. A jsfiddle example is here. (Not supported in <=IE8, but with a little creativity could degrade gracefully.)
4. Put the image inside your div (or similar) and then use CSS to position absolutely, set the z-index to force below the content, and stretch the image to the width and height of the element. Here's a jsfiddle example. (Note: UNSEMANTIC! Reduces maintainability, etc. But does have better support than CSS3 background-size...)