CSS: Background Image

By Xah Lee. Date: .

This page shows you how to use CSS background property.

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
border-box (default), padding-box, or content-box. The area for the image to fill. [see CSS Box Model Tutorial]
background-origin
border-box (default), padding-box, or 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, or 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:

<div class="b47126">xyz</div>
div.b47126 {
background-image: url(star_pattern.png);
min-width: 270px;
max-width: 270px;
min-height: 270px;
max-height: 270px;
border: solid thick grey;
}

CSS: Background Image