In this module learn the ways you can style backgrounds of boxes using CSS.
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
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
- 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, without cropping, compressing, or stretching it.
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.
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.
repeat-x repeats an image only horizontally; this is equivalent to
The following demo demonstrates these capabilities of the
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.
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 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
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: 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).
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 #
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.
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.
background-size property accepts the following keywords:
auto: When used independently, the background image is sized based on its intrinsic width and height; when
autois used alongside another CSS value for the width (first parameter) or height (second parameter), the dimension set to
autois sized as needed to maintain the natural aspect ratio of the image. This is the default behavior of the
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, unless
background-repeatis set to
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 attachment #
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:
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.
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 #
background-origin property enables you to modify the area of backgrounds associated with a particular box. The values the property accepts correspond to the
content-box regions of a box .
Try these options out using the following demo:
Background clip #
background-clip property controls what is visually seen from a background layer regardless of the bounds created by the
background-origin the regions that can be specified are
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.
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. For up-to-date information about the browsers that support this option for
background-clip, check out this compatibility table
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
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.
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-position> / <background-size>?
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 ;
Background images are positioned in the top-left of a CSS box.True False
Depending on its intrinsic size an image may appear to not be in positioned in the top left corner of a CSS box,
background-position needs to be explicitly used to change the default position of a background image.
Background images are not repeated by default.False True
background-repeat: no-repeat explicitly must be used to not repeat a background-image. Additionally
background-repeat: repeat-x and
background-repeat: repeat-y can be used to prevent repeating in the specific axis.
Which of the following
background-position declarations are valid?
background-position: 50% left
background-position: top right 33%
background-position: right bottom
When CSS values are used with keywords, the order of the values matters.
This positions a background image to the very top of a box and 33% from the right edge of the box.
This positions a background image to the very right and bottom of a box. Position of differing axes can be named in any order.
This positions a background image to be at the very left of the box and centered vertically. When just one position of an axis is provided, the background image is centered in the opposite axis.
What would be the steps to render a background like this against its content?
background-clip: text. Check if the property is supported in the browsers you need to support.
-webkit-text-fill-color: transparentor semi-transparent for the background image to be seen within the text.
To set a background image to be fixed within a viewport you use:
'This is an invalid value for the
background-fixed-to-viewport doesn't exist in CSS yet.
background-attachment: fixed explicitly sets the background image to be fixed within the current viewport.
background-attachment is the property to use to set a background image to be fixed within a viewport; however
scroll is the default value for the property that fixes the background image by default to the box unimpacted by the content within the box.'
The default background-origin of a background within a CSS box is:
Valid value for
background-origin, but isn't the default.
Valid value for
background-origin, and it's pre-arranged borders can be painted on top of backgrounds, but isn't the default.
The default value for
background-origin. Allows the background to be rendered beyond the content and up to the border of a box.
While a recognized region of a CSS box, it is an invalid value for the