By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Stretch Background-images in CSS3

How to Stretch a background-image. Finally its become possible using CSS.

Created: 2012-02-25 17:21

How to Stretch a Background-image in CSS3. Normally this is not something you should do, and it will usually be hard to achieve good readability if you use background images for textural content.

Brugbart touched the subject before. Basically we used absolute positioning on a html img element, and gave it a width and height of 100%, and a z-index of -1. This image was placed inside a wrapping element, which had its position set to relative.

Using background-size

The new method uses the background-size property of CSS3, example is shown below.

body {
  background-image: url("background.png") no-repeat;
  background-size: 100%;