0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<h2>The background-color Property</h2>
1
<h2>The background-color Property</h2>
2
<p>The background color can be set using the background-color CSS property.</p>
2
<p>The background color can be set using the background-color CSS property.</p>
3
<p>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.</p>
3
<p>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.</p>
4
<p>Here is an example of how the property is used:</p>
4
<p>Here is an example of how the property is used:</p>
5
selector { background-color: #ff0000; }<h2>The background-image Property</h2>
5
selector { background-color: #ff0000; }<h2>The background-image Property</h2>
6
<p>The background image can be set using the CSS property background-image. The image address must be enclosed inside url("..."). For example:</p>
6
<p>The background image can be set using the CSS property background-image. The image address must be enclosed inside url("..."). For example:</p>
7
selector { background-image: url("image address"); }<p>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.</p>
7
selector { background-image: url("image address"); }<p>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.</p>
8
<h2>The background-repeat Property</h2>
8
<h2>The background-repeat Property</h2>
9
<p>By default, the background image is repeated. You can control this behavior with the background-repeat CSS property. The property has 4 values:</p>
9
<p>By default, the background image is repeated. You can control this behavior with the background-repeat CSS property. The property has 4 values:</p>
10
<ul><li>repeat - Repeat in all directions. This is the default value.</li>
10
<ul><li>repeat - Repeat in all directions. This is the default value.</li>
11
<li>repeat-x - Repeat only along the horizontal axis.</li>
11
<li>repeat-x - Repeat only along the horizontal axis.</li>
12
<li>repeat-y - Repeat only along the vertical axis.</li>
12
<li>repeat-y - Repeat only along the vertical axis.</li>
13
<li>no-repeat - Do not repeat.</li>
13
<li>no-repeat - Do not repeat.</li>
14
</ul><h2>The background-position Property</h2>
14
</ul><h2>The background-position Property</h2>
15
<p>The background-position property controls the position of the background image. The property value consists of two parts separated by a space: x y.</p>
15
<p>The background-position property controls the position of the background image. The property value consists of two parts separated by a space: x y.</p>
16
<p>x assigns the horizontal andy the vertical position.</p>
16
<p>x assigns the horizontal andy the vertical position.</p>
17
<p>For the x value, you can use the keywords left, center, right, as well as percentage and pixel values.</p>
17
<p>For the x value, you can use the keywords left, center, right, as well as percentage and pixel values.</p>
18
<p>For the y value, you can use the keywords top, center, bottom, as well as percentage and pixel values.</p>
18
<p>For the y value, you can use the keywords top, center, bottom, as well as percentage and pixel values.</p>
19
<p>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.</p>
19
<p>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.</p>
20
<h2>The background-attachment Property</h2>
20
<h2>The background-attachment Property</h2>
21
<p>With the background-attachment property, the background can be locked in place and will not move when the window is scrolled.</p>
21
<p>With the background-attachment property, the background can be locked in place and will not move when the window is scrolled.</p>
22
<p>The property value is:</p>
22
<p>The property value is:</p>
23
<ul><li>scroll - The background scrolls along with the content. This is the default value.</li>
23
<ul><li>scroll - The background scrolls along with the content. This is the default value.</li>
24
<li>fixed - The background does not scroll. It is fixed in one place.</li>
24
<li>fixed - The background does not scroll. It is fixed in one place.</li>
25
</ul><h2>The background Property</h2>
25
</ul><h2>The background Property</h2>
26
<p>You can set the background using the shorthand property background, for which you can specify its components separated by spaces:</p>
26
<p>You can set the background using the shorthand property background, for which you can specify its components separated by spaces:</p>
27
background: [bc] [bi] [br] [bp] [ba]; /* Legend: [bc] - background-color [bi] - background-image [br] - background-repeat [bp] - background-position [ba] - background-attachment */<p>If any component is not specified, then the default value will be used.</p>
27
background: [bc] [bi] [br] [bp] [ba]; /* Legend: [bc] - background-color [bi] - background-image [br] - background-repeat [bp] - background-position [ba] - background-attachment */<p>If any component is not specified, then the default value will be used.</p>
28
<a>Continue</a>
28
<a>Continue</a>