CSS: Background Image

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

• The area for the image to fill. 〔see CSS Box Model Tutorial〕

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