The CSS Podcast - 053: Background
Backgrounds
Behind every CSS box is a specialized layer called the background layer. CSS provides a variety of ways to make meaningful changes to it–including allowing multiple backgrounds.
Background layers are furthest from the user, rendered behind the contents of a box starting from its padding-box
region. This enables the background layer to not overlap with borders at all.
Background color
One of the simplest effects you can apply to a background layer is setting the color. The initial value of background-color
is transparent
, which allows the contents of a parent to be visible. A valid color set on a background layer sits behind other things painted on that element.
Background images
On top of the background-color
layer, you can add a background image, using the background-image
property. A background-image
accepts the following:
- An image URL or data URI using the
url
CSS function. - An image dynamically created by a gradient CSS function.
Setting a background-image with the url
CSS function
CSS gradient backgrounds
Several gradient CSS functions exist to allow you to generate a background-image, when passed two or more colors.
Regardless of which gradient function is used, the resulting image is intrinsically sized to match the amount of space available.
Demo showing example of applying a background-image using gradient functions:
Repeating background images
By default, background images repeat horizontally and vertically to fill the entire space of the background layer.
Change this by using the background-repeat
property with one of the following values:
repeat
: The image repeats within the space available, cropping as necessary.round
: The image repeats horizontally and vertically to fit as many instances into the space available. As the space available increases the image stretches, and after stretching half of the image's original width, compresses in order to add more image instances.space
: The image repeats horizontally and vertically to fit as many instances within the space available without cropping—spacing out instances of the image as needed. Repeating images touch the edges of the space a background layer occupies, with white space evenly distributed between them.
The background-repeat
property allows you to set the behavior for the x and y axis independently. The first parameter sets the horizontal repeat behavior, and the second parameter sets the vertical repeat behavior.
If you use a single value, it will be applied to both the horizontal and vertical repeats.
The shorthand also has convenient one-word options to make your intent clearer.
The value repeat-x
repeats an image only horizontally; this is equivalent to repeat no-repeat
.
The following demo demonstrates these capabilities of the background-repeat
property:
Background position
You may have noticed when some images on the Web are styled with a background-repeat: no-repeat
declaration, such images are displayed top left of their container.
The initial position of background images is top left. The background-position
property allows you to change this behavior by offsetting the image position.
As with background-repeat
, the background-position
property allows you to position images along the x and y axis independently with two values by default.
When CSS lengths and percentages are used, the first parameter corresponds to the horizontal axis while the second parameter corresponds to the vertical axis.
When keywords are only used the order of the keywords does not matter:
background-position: left 50%;
background-position: top left;
background-position: left top;
background-position: 50% left;
background-position: left right;
The background-position
property also has a convenient one value shorthand; the omitted value resolves to 50%
. Here's an example that demonstrates this using the keywords the background-position
property accepts:
In addition to its default two parameter form and one parameter form; the background-position
property also accepts up to four parameters;
When three or four parameters are used, a CSS length or percentage must be preceded by the top
, left
, right
, or bottom
keywords in order for the browser to calculate which edge of the CSS box the offset should originate from.
When three parameters are used, a CSS length or value can be the second or third parameter with the other two being keywords; the keyword it succeeds will be used to determine the edge the CSS length or value corresponds to being the offset of. The offset of the other keyword specified is set to 0.
background-position: bottom 88% right;
background-position: right bottom 88%;
background-position: 88% bottom right;
background-position: bottom 88% right 33%;
background-position: right 33% bottom 88%;
background-position: 88% 33% bottom left;
If background-position: top left 20%
is applied to a CSS background image, the image is placed at the top of the box, the 20%
value represents a 20% offset from the left of the box (on the x axis).
If background-position: top 20% left
is applied to a CSS background image, the 20% value represents a 20% offset from the top of the CSS box (on the y axis), and the image is placed at the left of the box.
When four parameters are used, the two keywords are paired with two values corresponding to an offset against the origins of each keyword specified. If background-position: bottom 20% right 30%
is applied to a background-image, the background-image is positioned 20% from the bottom, and 30% from the right of the CSS box.
The following demo demonstrates this behavior:
Here are more examples of using the background-position
property using a mix of CSS and keyword values:
Background Size
The background-size
property sets the size of background images; By default background images are sized based on their intrinsic (actual) width, height, and aspect ratio.
The background-size
property uses CSS length and percentage values or specific keywords. The property accepts up to two parameters corresponding to allowing you to change width and height of a background independently.
The background-size
property accepts the following keywords:
auto
: When used independently, the background image is sized based on its intrinsic width and height; whenauto
is used alongside another CSS value for the width (first parameter) or height (second parameter), the dimension set toauto
is sized as needed to maintain the natural aspect ratio of the image. This is the default behavior of thebackground-size
property.cover
: Covers the entire area of the background layer. This may mean the image is stretched or cropped.contain
: Sizes the image to fill the space without stretching or cropping. As a result, empty space can remain that will cause the image to repeat, unlessbackground-repeat
is set tono-repeat
.
The latter 2 are intended to be used in a standalone fashion without another parameter.
The following demo demonstrates these keywords in action:
Demo demonstrating applying these keywords to background-size
:
Background attachment
The background-attachment
property enables you to modify the fixed position behavior of background images (images part of a background layer) once the layer is visible on a screen.
It accepts 3 keywords: scroll
, fixed
, and local
.
The default behavior of the background-attachment
property is the initial value of scroll
. When more space is needed, the images move with that space within the background layer determined by the bounds of the CSS box.
Using the value fixed
fixes the position of background images to the viewport.
Once the space of the background layer images originally takes up needs to be scrolled (or rendered) offscreen, images within the background layer stay fixed in the original position the background layer enabled them to be until the entire layer is scrolled off screen by the viewport.
The local
keyword enables the position of background images to be fixed relative to the element's contents. Background images now move along the space they occupy as that space renders inside and outside the bounds of the CSS box (usually due to scrolling, 2D, or 3D transformations).
Background origin
The background-origin
property enables you to modify the area of backgrounds associated with a particular box. The values the property accepts correspond to the border-box
, padding-box
, and content-box
regions of a box .
Try these options out using the following demo:
Background clip
The background-clip
property controls what is visually seen from a background layer regardless of the bounds created by the background-origin
property.
Like background-origin
the regions that can be specified are border-box
, padding-box
, and content-box
corresponding to where a CSS background layer can be rendered. When these keywords are used, any rendering of the background further than the region specified will be cropped or clipped.
The background-clip
property also accepts a text
keyword that clips the background to be no further than the text within the content box. For this effect to be evident in the actual text within a CSS box, the text must be partially or completely transparent.
A relatively new property, at the time of this writing, Chrome and most browsers require the -webkit-
prefix to use this property.
Multiple backgrounds
As mentioned at the beginning of the module, the background layer allows multiple sublayers to be defined. For brevity, I'll refer to these sublayers as backgrounds.
Multiple backgrounds are defined top to bottom; The first background is the closest to the user, while the last background is the furthest from the user.
The only background defined or the last layer is designated the final background layer by the browser. Only this layer is allowed to assign a background-color
.
Multiple layers can be individually configured using most background-related CSS properties that are comma separated, as demonstrated in the code snippet and live demo below.
background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
url("https://assets.codepen.io/7518/blob.svg"),
linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
background-size: contain, cover, auto;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: 50% 50%, 10% 50%, 0% 0%;
background-origin: padding-box, border-box, content-box;
The background shorthand
To make it easier to style the background layer of a box-especially when multiple background layers are desired–there is a shorthand that follows the following specific pattern:
background:
<background-image>
<background-position> / <background-size>?
<background-repeat>
<background-attachment>
<background-origin>
<background-clip>
<background-color>?
Order is important in the shorthand form of declaring multiple backgrounds. The position and size values must both be provided, separated by a slash (/
). Declaring the origin and clip behavior in the correct order allows you take advantage of setting keywords that are valid for both simultaneously
The following declaration clips the background, and originates it from the content box:
background: url("https://assets.codepen.io/7518/blob.svg") 50%
50% / contain no-repeat content-box;
With these shorthand semantics in mind, the previous background-related declarations of the code snippet could be rewritten to be following:
background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;
Check your understanding
Test your knowledge of CSS Backgrounds
Background images are positioned in the top-left of a CSS box.
Background images are not repeated by default.
Which of the following background-position
declarations are valid?
background-position: top right 33%
background-position: right bottom
background-position: left
background-position: 50% left
To set a background image to be fixed within a viewport you use:
background-attachment: scroll
background-position: fixed
background-attachment: fixed
background-fixed-to-viewport: true
The default background-origin of a background within a CSS box is:
padding-box
margin-box
content-box
border-box