More background-size examples

This page requires either a Gecko-based browser whose rendering code is no older than the last day or so of July 2009 (based off trunk code at that time in mozilla-central) or a browser with support for the unprefixed CSS 3 background properties. Other browsers are not supported either because I don't know they exist or because their background-size support, prefixed or otherwise, doesn't match the latest spec, and I'd rather avoid possible confusion.

background-size: 50%

This div is 5em high stretching across the page; the background image for it stretches halfway across it horizontally, without vertical distortion. It does not repeat.

  height: 5em;
  background-color: white;
  background-repeat: no-repeat;
  background-size: 50%;
  -moz-background-size: 50%;
  background-image: url(cowbell.jpg);
  border: 1px solid black;

background-size: 50% 50%

This div is 5em high stretching across the page; the background image for it begins at the center of the div and extends to the bottom right corner, using background-position to effect this (moving it from behind this text for legibility). Note that the position is calculated with respect to the resized image dimensions, not with respect to its intrinsic size.

  height: 5em;  
  background-color: white;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  -moz-background-size: 50% 50%;
  background-image: url(cowbell.jpg);
  border: 1px solid black;
  background-position: 100% 100%;

background-size: auto 50%

This div is 6em high stretching across the page; the background image for it stretches halfway from top to bottom vertically, without horizontal distortion. The div is larger than the others because its font-size and height are larger, so this text is still (nominally) readable on a repeating background.

  height: 6em;
  font-size: 1.5em;
  background-color: white;
  background-repeat: repeat;
  background-size: auto 50%;
  -moz-background-size: auto 50%;
  background-image: url(cowbell.jpg);
  border: 1px solid black;

background-size: auto 75px

This div is 5em high stretching across the page; the background image for it is 75 CSS pixels tall and the width necessary to preserve its proportion without horizontal distortion. The background image repeats.

  height: 5em;
  background-color: white;
  background-repeat: repeat;
  background-size: auto 75px;
  -moz-background-size: auto 75px;
  background-image: url(cowbell.jpg);
  border: 1px solid black;

background-size: 150px 75px

This div is 5em high stretching across the page; the background image for it is 150 CSS pixels wide and 75 CSS pixels tall. The background image repeats.

  height: 5em;
  background-color: white;
  background-repeat: repeat;
  background-size: 150px 75px;
  -moz-background-size: 150px 75px;
  background-image: url(cowbell.jpg);
  border: 1px solid black;

background-size: 100% 100% and a large border

This div is 5em high stretching across the page; the background image for it is stretched to occupy the full content box (that is, the box bounded by the div's padding). It has a 2em dashed pink border, showing that the base white color of the background shows through but the image doesn't doesn't intrude upon it.

  height: 5em;
  background-color: white;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-image: url(cowbell.jpg);
  border: 2em dashed pink;

background-size: 100% 100% and a large border and background-origin: border-box

This div is 5em high stretching across the page; the background image for it is stretched to the size of the border box, so it extends beneath and shines through the 2em dashed pink border in places.

  height: 5em;
  background-color: white;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-image: url(cowbell.jpg);
  border: 2em dashed pink;
  -moz-background-origin: border;
  background-origin: border-box;

The actual background image

The image used throughout this demo is this image, displayed at original size, from the Wikimedia Commons; see COPYING for usage details:

Feel free to take a look at the rest of my site while you're here.