Question

I have been using css for a few years but have never ventured past using fixed width layouts. I’m looking at using a fluid layout for my next site, or as much percentage as I can, but I have a question that worries me.

If I have an image with 1900px width set as a background, I understand that it simply shrinks when the browser calls for say 1600px.

What happens when the resolution calls for a 2000px width? I will be left with white space, correct? How can one avoid this? I feel like I should probably just throw out that its not an image that can be repeated horizontally.

Answer 1

A trick usually used is to have the image be “inner-glowed” with a color, then set the background color the same as well.

Suppose your image doesn’t tile, and has black “inner-glow” or “feather” effect, then you can make the container’s background color as such:

background-color: #000;
background-image: url(your_bgimage.jpg); /* image with black borders due to effect */
background-repeat: no-repeat;
background-position: center center;