CSS Backgrounds

The background-color property is what web developers use to place text or elements on a colored canvas. You can set background for any HTML element, e.g., <p>, <h1>, <div>, etc.

To specify color values in CSS, we use the following formats:

• A color name, like yellow

• A HEX value, like #F8DB46

• An RGB value, like rgb(248, 219, 70)

The image background is largely popular for hero images on websites, image carousels, or article covers. To set an image for a background, we use the background-image property. By default, the image takes the whole element's container, and if it's too small, the browser repeats or tiles the image. The property value should contain a url specifying the image location.

We need the background-attachment property to specify whether the background image should scroll with the rest of the page or have a fixed position relative to the viewport. In other words, with the fixed value, the image will always be in sight, while with the scroll value, the image will scroll along with the content.

The background-clip property defines how far the background image or color should extend within its border-box, padding-box, or content-box only.

Consider the following:

• The border-box value extends the background to the element's borders
• The padding-box value extends it to the inner side of borders
• The content-box value defines the background so that it doesn't go beyond its content area

Essentially, this property has no effect if the background color or background image aren't specified.

The background-origin property defines the starting point of the background image.

Consider the following:

• If you want it to start from the upper left corner of the border, you should use the border-box value
• The padding-box value starts the image from the upper left corner of the padding edge
• With the content-box value, the image extends to its full size from the upper left corner of the content container

The background-position property defines the original position of the background image. It can contain keyword values — top, bottom, left, or right — specifying the edge of the element's box to which you want to place the background. When we only use one value, the browser assumes the other value sets to center.

In the two-value notation, the first value represents the horizontal position, and the second represents the vertical. For example, the declaration background-position: bottom left; means the object will be placed at bottom-left corner.

You can also use length (px, pt, cm) or percentage values for defining the background position and combine them to further specify the coordinates.^[1]

By default, the browser repeats the background image, filling up the full element's box. But how can you control this repetition?

The background-repeat property allows you to:

• Set a background image to repeat vertically along the y-axis, using the value repeat-y
• Set the background image to repeat horizontally along the x-axis, using the value repeat-x
• Set the background image to repeat in both directions, using the value repeat

If you don't want any repetition, set the value to no-repeat.

With the background-size property, you can control the image and either stretch it, leave it in its natural size, or shrink it to fit the container.

The contain value scales the image to expand into the container without distorting proportions. If the container is bigger, the browser tiles the image.

In turn, the cover value stretches the image, scaling it up to fill the container. If the image's proportions don't coincide with the element's, it gets cropped either vertically or horizontally so that no blank gaps are left.

You can use length (px, pt, cm) or percentage values to set precise dimensions for an image.

The number of background properties is overwhelming. That's why the background shorthand property is like a magic pill allowing you to shorten your code and avoid tedious typing.

The background property allows us to set the background's color, background's image, background's repeat pattern, the background's attachment (to specify whether the background is fixed or scrolls with the page), and position in a single declaration.

If you miss any property's value, the browser will set it to default.

For setting images as a background, we use the background-image property. Its url value specifies the image location in an internal file system (relative link) or provides an external address (absolute link). Its standard syntax requires parentheses (( )), quotation marks (" "), and a semicolon (;) at the end of the declaration.

The background-repeat property controls the way the image is repeated. In this scenario, to repeat the background along the y-axis, you should use the value repeat-y. What happens when we don't specify this property? The browser repeats the image both vertically and horizontally by default.

The background-position property defines the position of the background image. The simplest way to set it is to use keyword values (top, bottom, left, right). Alternatively, for more precise coordinates, you can use pixels, points, centimeters, or percent.