CSS: Background Image

By Xah Lee. Date: . Last updated: .

CSS Background Attributes

background-image

url(url).

  • By default, the image tiles from left to right, top to bottom.
  • You can set the background-repeat to override.
background-position

offset-x offset-y.

  • Shift the image horizontally and vertically.
  • The offsets are CSS Units.
background-clip

any of

  • border-box (default)
  • padding-box
  • content-box
background-origin

any of

  • border-box (default)
  • padding-box
  • content-box

The start position of the image, from top left.

background-repeat
  • repeat (default)
  • no-repeat
  • repeat-x
  • repeat-y
background-size

width height

CSS Units

each can also be

  • auto
  • contain (scale to fit, keep aspect ratio)
  • cover (scale to fit, don't keep aspect ratio).
background-attachment
  • scroll (default)
  • fixed

Whether the background image scrolls with the page, or fixed to window.

background-color

CSS Color Value

Color will show for the transparent area of the image.

Example

.xclass {
 background-image: url("my_img.png");
 min-width: 270px;
 max-width: 270px;
 min-height: 270px;
 max-height: 270px;
 border: solid thick grey;
}

CSS, Background Image

CSS, border, margin, box model