Background-related CSS properties

Articles

This article explains background-related CSS properties.

You can learn how to describe properties such as background setting, position, and repetition.

YouTube Video

Creating HTML for preview

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

Background and Decoration

`background-color` Property

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

The background-color property is used in CSS to set the background color of an element. You can specify the color displayed behind text and other elements, and colors can be defined in various formats. The method of specifying colors is similar to the color property, but you can also specify a completely transparent background using transparent.

Explanation:

red-example class specifies the background color as red using a keyword.
hex-example class specifies the background color using a hexadecimal code.
rgb-example class specifies the background color using RGB format.
rgba-example class specifies the background color using RGBA format, adding transparency.
hsl-example class specifies the background color using HSL format.
hsla-example class specifies the background color using HSLA format, adding transparency.
transparent-example class sets the background to transparent.

`background-image` Property

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

The background-image property is used to set an image as the background of an element. The specified image is displayed as the background of the element, and its size, position, and repetition method can be adjusted with other related properties. We will also explain related properties such as background-size, background-position, and background-repeat later.

Explanation:

background-image-example class uses the background-image property to set image.jpg as the background. background-size: cover makes the image cover the entire element, and background-position: center centers the image. Repetition is disabled with background-repeat: no-repeat.
The background-image-gradient class uses linear-gradient() to set a background gradient from red to blue. The gradient is displayed from left to right.

Types of Values That Can Be Specified

The background-image property can take the following values.

url(): Specifies the URL of the background image. Include the image file within url(). (ex.url('image.jpg'))
none: Specifies not to set a background image. This is the default value.
Gradients: It's also possible to set gradients as background images using CSS gradient features. (ex.linear-gradient(), radial-gradient())

Key Points of the `background-image` Property

Image size and positioning: The size and positioning of background images can be finely controlled with other properties, allowing for design adjustments. For example, specifying background-size: cover stretches the image to cover the entire area, removing any clipping.
Using Gradients: Instead of an image, you can use a gradient as the background, adding a dynamic element to the design.

`background-position` Property

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

The background-position property is used to specify the position of a background image within an element. By controlling where the background image appears within the element, you can create layouts that match your design. The default is 0% 0%, placing the image in the top left corner.

Explanation:

top-left-example class specifies the image position as top left, placing the image in the top-left corner.
center-example class positions the image in the center using the center attribute.
bottom-right-example class specifies the image position as bottom right, placing the image in the bottom-right corner.

Types of Values That Can Be Specified

The background-position property can take the following types of values.

Keywords: You can specify left, right, top, bottom, center.
- Specifying center will place the background image in the center of the element.
- Specifying right will place the background image on the right side.
- Specifying top left will place the background image in the top left corner.
- Specifying bottom right will place the background image in the bottom right corner.
Length or percentage: You can specify values like 10px 20px, 50% 50%.
- Specifying 10px 20px will place the background image 10px from the left and 20px from the top.
- Specifying 50% 50% will center the background image both horizontally and vertically.
calc() function: Allows more precise positioning using CSS calculations.

The `background-size` property

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

The background-size property is used to specify the size of a background image for an element. By using this property, you can adjust how the background image is displayed, whether it fills the entire element or maintains its original size, to fit the design. The default value is auto, which maintains the original size of the background image.

Explanation:

cover-example class specifies cover. The image will be enlarged to cover the entire element, but parts may be cropped.
contain-example class specifies contain. The image will be adjusted to fit within the element, but some blank space might appear.
fixed-size-example class specifies a fixed size for the background image, setting the width and height to 100px each.

Types of Values That Can Be Specified

The background-size property can be assigned the following types of values.

Keywords
- auto: Retains the default size of the image (width and height are determined automatically).
- cover: Adjusts the size of the background image to completely cover the element. It will fill the entire element, but parts of the image may be trimmed.
- contain: Adjusts the image to fit within the element, but does not cover the entire element. The aspect ratio of the image is maintained.
Numerical values (px, %, em, etc.)
- Width and Height: Specify the width and height explicitly. If only one value is specified, it applies to the width, and the height is adjusted automatically.
- Percentage: Specify the size of the background image as a percentage of the element size. For example, 50% 50% sets the image to half the width and height of the element.

`background-repeat` Property

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

The background-repeat property is used to control how the background image of an element is repeated. By default, the background image is repeated horizontally and vertically within the element, but you can customize the repetition behavior using this property.

Explanation:

repeat-example class displays the image repeated both vertically and horizontally.
repeat-x-example class repeats the image horizontally only.
no-repeat-example class displays the image only once without repeating.
space-example class arranges the background images evenly with equal spacing between them.
round-example class automatically resizes the background image to repeat and fill the entire element.

Values that can be specified

The background-repeat property can be assigned the following types of values.

repeat: The background image is repeated along both the X-axis (horizontal) and Y-axis (vertical). This is the default value.
repeat-x: The background image is repeated only along the X-axis (horizontal).
repeat-y: The background image is repeated only along the Y-axis (vertical).
no-repeat: The background image is not repeated and is displayed only once.
space: The background image is repeated at regular intervals, with equal spacing between.
round: The background image is repeated, but the size is adjusted to fill the entire element. The image may be resized.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

CSS properties related to the box model CSS properties related to box model decoration

Background-related CSS properties

YouTube Video

Creating HTML for preview

Background and Decoration

background-color Property

Explanation:

background-image Property

Explanation:

Types of Values That Can Be Specified

Key Points of the background-image Property

background-position Property

Explanation:

Types of Values That Can Be Specified

The background-size property

Explanation:

Types of Values That Can Be Specified

background-repeat Property

Explanation:

Values that can be specified

YouTube Video

`background-color` Property

`background-image` Property

Key Points of the `background-image` Property

`background-position` Property

The `background-size` property

`background-repeat` Property