CSS: Background Image

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.

For detail, see Colors and backgrounds#background

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;
}