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