mozilla
Your Search Results

    Scaling background images Redirect 1

    The background-size CSS property makes it possible to adjust the size of background images, instead of the default behavior of tiling the image at its full size. You can scale the image upward or downward as desired.

    Tiling a large image

    Let's consider a large image, a 1233x1233 Firefox logo image. We want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a 300x300 pixel square, resulting in this look:

    screenshot1.png

    This can be achieved using the following CSS:

    .square {
      width: 300px;
      height: 300px;
      background-image: url(fxlogo.png);
      border: solid 2px;
      text-shadow: white 0px 0px 2px;
      font-size: 16px;
      background-size: 150px;
    }
    

    There is no need to prefix background-size anymore, though you may consider adding some prefixed version of it if you are targetting very old browsers.

    Stretching an image

    You can also specify both the horizontal and vertical sizes of the image, like this:

    background-size: 300px 150px;
    

    The result looks like this:
    screenshot3.png

    Scaling an image up

    On the other end of the spectrum, you can scale an image up in the background. Here we scale a 16x16 pixel favicon to 300x300 pixels:

    screenshot2.png

    .square2 {
      width: 300px;
      height: 300px;
      background-image: url(favicon.png);
      background-size: 300px;
      border: solid 2px;
      text-shadow: white 0px 0px 2px;
      font-size: 16px;
    }
    

    As you can see, the CSS is actually essentially identical, save the name of the image file.

    Special values: "contain" and "cover"

    Beside <length> values, the background-size CSS property offers two special size values, contain and cover. Let's take a look at these.

    contain

    The contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container. Try resizing this window using a browser that supports scaling background images (such as Firefox 3.6 or later) to see this in action in the live example below.

    <div class="bgSizeContain">
      <p>Try resizing this window and see what happens.</p>
    </div>
    .bgSizeContain {
      height: 200px;
      background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
      background-size: contain;
      border: 2px solid darkgray;
      color: #000; text-shadow: 1px 1px 0 #fff;
    }

    cover

    The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.

    This example uses following HTML & CSS:

    <div class="bgSizeCover">
      <p>Try resizing this window and see what happens.</p>
    </div>
    .bgSizeCover {
      height: 200px;
      background-image: url('/files/2917/fxlogo.png');
      background-size: cover;
      border: 2px solid darkgray;
      color: #000; text-shadow: 1px 1px 0 #fff;
    

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,