Background Size

The CSS background-size Property

The background-size property allows you to specify the size of background images.

The background size can be specified in lengths, percentages, or by using one of the keywords: auto, contain, or cover.

The following example resizes a background image to much smaller than the original image (using pixels):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

#div1
{

background-image: url(img_flower.jpg);
  background-position: right top;

    background-repeat: no-repeat;
  background-size: 100px 80px;
}

background-size - auto, contain and cover

The keyword values for background-size are auto, contain and cover.

The auto value is the default value, and displays the background image in its original size.

The contain value scales the image up or down, to fit inside the content area.

The cover value scales the image to be as large as possible so that the content area is completely covered by the background image (its width and height will be equal to, or larger than the content area).

Example

#div1 {
  border: 1px solid black;
  background-image:
   url(img_flwr.gif);
  background-repeat: no-repeat;

   background-size: contain;
}

#div2
   {
  border: 1px solid black;
  background-image: url(img_flwr.gif);

   background-repeat: no-repeat;
  background-size: cover;
}

#div3 {

   border: 1px solid black;
  background-image: url(img_flwr.gif);

   background-repeat: no-repeat;
  background-size: auto;
}

Define Sizes of Multiple Background Images

The background-size property also accepts multiple values (using a comma-separated list), when working with multiple backgrounds.

The following example has three background images specified, with different background-size value for each image:

Example

#div1 {
  background-image: url(img_tree.gif),
   url(img_flwr.gif), url(paper.gif);
  background-position: left top, right
   bottom, left top;
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
   contain, 150px, auto;
}

CSS Full Size Background Image

Now we want to have a background image that covers the entire browser window at all times.

The requirements are as follows:

• Fill the entire page with the image (no white space)

• Scale image as needed

• Center image on page

• Do not cause scrollbars

Here, we define the styles in the <html> element (the <html> element is always at least the height of the browser window). Then we set a fixed and centered background on it. Then adjust its size with the background-size property:

Example

html {
  background: url(img_man.jpg) no-repeat
center fixed;
  background-size: cover;
}

CSS Hero Image

You could also use different background properties on a <div> to create a hero image (a large image with text), and place it where you want.

Example

.hero-image {
  background: url(img_man.jpg) no-repeat center;

   background-size: cover;
  height: 500px;
  position:
   relative;
}

CSS Advanced Background Properties