Posted By

michellebracken on 08/18/11


Versions (?)

Stretching a Background Image

 / Published in: CSS

To create a background image that can expand and contract with it’s containing element you want to create an image larger than needed, large enough to accommodate the largest possible size of the containing element. Then use the background-position property to center the background image

This will center your background image in the containing element. The image will grow and shrink to fit the size of the containing element and always be centered. You’ll want to make sure the center of the image contains the most important part of the image since only the center is guaranteed to visibly show.

  1. 1 {background-position: 50% 50%;}

Report this snippet  

You need to login to post a comment.