CSS and images

background-image

The background-image property sets one or more background images for an element. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Tip: The background of an element is the total size of the element, including padding and border (but not the margin).
Tip: Always set a background-color to be used if the image is unavailable.

Value Description CSS
background-color Specifies the background colour to be used 1
background-image Specifies ONE or MORE background images to be used 1
background-position Specifies the position of the background images 1
background-size Specifies the size of the background images 3
background-repeat Specifies how to repeat the background images 1
background-origin Specifies the positioning area of the background images 3
background-clip Specifies the painting area of the background images 3
background-attachment Specifies whether the background images are fixed or scroll with the rest of the page 1
initial Sets this property to its default value. 3
inherit Inherits this property from its parent element. 2

background-position

The background-position property sets the starting position of a background image.
Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Value Description
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
If you only specify one keyword, the other value will be “center”
x% y% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
xpos ypos The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

background-size

The background-size property specifies the size of the background images. There are four different syntaxes you can use with this property: the keyword syntax (“auto”, “cover” and “contain”), the one-value syntax (sets the width of the image (height becomes “auto”), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated with comma).

Value Description
auto Default value. The background image is displayed in its original size
length Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto”.
percentage Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto”
cover Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain Resize the background image to make sure the image is fully visible
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

background-repeat

The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.
Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element’s top left corner.

Value Description
repeat The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default
repeat-x The background image is repeated only horizontally
repeat-y The background image is repeated only vertically
no-repeat The background-image is not repeated. The image will only be shown once
space The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images
round The background-image is repeated and squished or stretched to fill the space (no gaps)
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

background-origin

The background-origin property specifies the origin position (the background positioning area) of a background image.
Note: This property has no effect if background-attachment is “fixed”.

Value Description
padding-box Default value. The background image starts from the upper left corner of the padding edge
border-box The background image starts from the upper left corner of the border
content-box The background image starts from the upper left corner of the content
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

background-clip

The background-clip property defines how far the background (colour or image) should extend within an element.

Value Description
border-box Default value. The background extends behind the border
padding-box The background extends to the inside edge of the border
content-box The background extends to the edge of the content box
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

background-attachment

The background-attachment property sets whether a background image scrolls with the rest of the page or is fixed.

Value Description
scroll The background image will scroll with the page. This is default
fixed The background image will not scroll with the page
local The background image will scroll with the element’s contents
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Sources:

W3Schools