Interactive online courses HTML Academy
2026-03-09 12:25 Diff
https://htmlacademy.org/courses/advanced-styling/backgrounds/summary-1

The background-color Property

The background color can be set using the background-color CSS property.

Colors in CSS can be specified in different formats: in hexadecimal (or HEX), RGB, or RGBA as well as using such color constants such as red or green.

Here is an example of how the property is used:

selector { background-color: #ff0000; }

The background-image Property

The background image can be set using the CSS property background-image. The image address must be enclosed inside url("..."). For example:

selector { background-image: url("image address"); }

An element can be assigned both a background color and a background image. In this case, the image will be displayed over the background color.

The background-repeat Property

By default, the background image is repeated. You can control this behavior with the background-repeat CSS property. The property has 4 values:

  • repeat – Repeat in all directions. This is the default value.
  • repeat-x — Repeat only along the horizontal axis.
  • repeat-y — Repeat only along the vertical axis.
  • no-repeat – Do not repeat.

The background-position Property

The background-position property controls the position of the background image. The property value consists of two parts separated by a space: x y.

x assigns the horizontal andy the vertical position.

For the x value, you can use the keywords left, center, right, as well as percentage and pixel values.

For the y value, you can use the keywords top, center, bottom, as well as percentage and pixel values.

When the background image is larger than the block, it is cropped. The background-position property controls what part of the image is cropped. To do this, you can use relative values (percentages) and sometimes absolute values (pixels). Negative values can be used, and pixels and percentages may also be combined.

The background-attachment Property

With the background-attachment property, the background can be locked in place and will not move when the window is scrolled.

The property value is:

  • scroll – The background scrolls along with the content. This is the default value.
  • fixed – The background does not scroll. It is fixed in one place.

The background Property

You can set the background using the shorthand property background, for which you can specify its components separated by spaces:

background: [bc] [bi] [br] [bp] [ba]; /* Legend: [bc] — background-color [bi] — background-image [br] — background-repeat [bp] — background-position [ba] — background-attachment */

If any component is not specified, then the default value will be used.


Continue