CSS Background Properties

CSS background properties control the background color and images of elements. They help create visually appealing and professional-looking web pages.

1. background-color

The background-color property sets a solid background color for an element.

Example 1: background-color

selector { background-color: #4caf50; }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            background-color: #4caf50;
        }
    </style>

</head>

<body>

    <div>Solid background color</div>

</body>

</html>

Output

Solid background color

Explanation:
• Adds a single background color
• Works with all HTML elements

2. background-image

The background-image property sets an image as the background of an element.

Example 2: background-image

selector { background-image: url("https://picsum.photos/400/200"); }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        
                div {
                background-image: url("https://picsum.photos/400/200");

                }
            
    </style>

</head>

<body>

    <div>Background image demo</div>

</body>

</html>

Output

Background image demo

Explanation:
• Loads an external image
• Image may repeat by default

3. background-repeat

Controls whether a background image repeats.

Example 3: background-repeat

selector { background-repeat: no-repeat; }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            background-image: url("https://picsum.photos/400/200");
            background-repeat: no-repeat;
        }
    </style>

</head>

<body>

    <div>Background image demo</div>

</body>

</html>

Output

Image does not repeat

Explanation:
• no-repeat shows image once
• Other values: repeat-x, repeat-y

4. background-position

Sets the position of the background image.

Example 4: background-position

selector { background-position: center; }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            background-image: url("https://picsum.photos/400/200");
            background-position: center;
        }
    </style>

</head>

<body>

    <div>Background image demo</div>

</body>

</html>

Output

Image centered

Explanation:
• Positions image inside container
• Accepts keywords and values

5. background-size

Controls the size of the background image.

Example 5: background-size

selector { background-size: cover; }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            background-image: url("https://picsum.photos/400/200");
            background-size: cover;
        }
    </style>

</head>

<body>

    <div>Background image demo</div>

</body>

</html>

Output

Background image covers area

Explanation:
• cover fills entire container
• contain keeps full image visible

Important Notes

✔ Images make background properties easier to understand
✔ Use cover for hero sections
✔ Use no-repeat for icons

FAQ

Why is my background image repeating?

By default, background images repeat. Use background-repeat: no-repeat.

Why is background-size important?

It controls how the image fits inside the container.

« Previous Next »