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. |