CSS/CSS3 background auto increase with content

how can i make my backgrounds (eg. header bg or foot开发者_运维问答er bg) to auto expand horizontally with the content i put on any of the main content areas in my code? .. :) any help is appreciated. thanks!

There are a few ways that I can think of:

1. Dynamically create your CSS stylesheet. Doing this will allow you to change the sizes of the image accordingly. This is overkill and probably too involved for what you need.
2. Set the width to be 100% (width: 100%). This will fill the entire area regardless of its size. This works great in most instances, and might be useful for you.
3. Create an instance of a repeating background and repeat it horizontally (repeat-x). I think that this is probably the best solution for you as it doesn't distort the background like when stretched as described above.