CSS background-image

The background-image property in CSS sets one or more images as the background of an element. It is commonly used to enhance the visual appearance of a web page.

What is background-image?

Using background-image, you can display an image behind the content of an element. You can control how it repeats, its position, size, and attachment.

1. Adding a Simple Background Image

You can use the url() function to load an image.

Example 1: Simple 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>Background Image</title>

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

<body>

    <div>
        This div has a background image.
    </div>

</body>

</html>

Output

This div has a background image.

Explanation:
• Loads an image from a URL
• Displayed behind the content of the element

2. Controlling Background Repeat

By default, background images repeat to fill the container. You can change this using background-repeat.

Example 2: No Repeat

selector { background-image: url('https://picsum.photos/150/100'); 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/150/100');
                background-repeat: no-repeat;
                height: 150px;
                }
            
    </style>
</head>
<body>

<div>Image does not repeat.</div>

</body>
</html>

Output

Image does not repeat.

Explanation:
• Default is repeat
• Use no-repeat to display the image only once

3. Setting Background Position

The background-position property sets the starting position of the background image.

Example 3: Center Position

selector { background-image: url('https://picsum.photos/150/100'); background-repeat: no-repeat; 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>Image centered in div.</title>

    <style>
                div{
                background-image: url('https://picsum.photos/150/100');
                background-repeat: no-repeat;
                background-position: center;
                }
    </style>
</head>
<body>

<div>Image centered in div.</div>

</body>
</html>

Output

Image centered in div.

Explanation:
• Positions image inside container
• Accepts keywords like center, top, bottom, percentages, or coordinates

4. Controlling Background Size

The background-size property scales the background image to fit the container.

Example 4: Cover and Contain

div.cover { background-image: url('https://picsum.photos/600/400'); background-size: cover; } div.contain { background-image: url('https://picsum.photos/600/400'); background-size: contain; 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>Cover and Contain</title>

    <style>
                div.cover {
                background-image: url('https://picsum.photos/600/400');
                background-size: cover;
                height: 200px;
                }
                div.contain {
                background-image: url('https://picsum.photos/600/400');
                background-size: contain;
                background-repeat: no-repeat;
                height: 200px;
                }
    </style>
</head>
<body>

  <div class="cover">Background image covers the entire div.</div>

  <div class="contain">Background image contained inside div.</div>

</body>
</html>

Output

Background image covers the entire div.

Background image contained inside div.

Explanation:
• cover fills the container (may crop)
• contain fits the entire image inside container

5. Background Attachment (Fixed)

The background-attachment property controls whether the background scrolls with the page or stays fixed.

Example 5: Fixed Background

div { background-image: url('https://picsum.photos/800/600'); background-attachment: fixed; background-size: cover; height: 250px; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Fixed Background</title>

    <style>
                div {
                background-image: url('https://picsum.photos/800/600');
                background-attachment: fixed;
                background-size: cover;
                height: 250px;
                }
    </style>
</head>
<body>

  <div>Scroll to see fixed background effect.</div>

</body>
</html>

Output

Scroll to see fixed background effect.

Important Notes

✔ Always set height for div to see the image
✔ Use no-repeat for a single image
✔ cover and contain control scaling
✔ fixed creates a parallax-like effect

Frequently Asked Questions (FAQ)

Can I use multiple background images?

Yes, separate multiple images with commas in background-image.

Why does my background image not show?

Check the image URL and make sure the container has height and width.

What is the difference between cover and contain?

Cover fills the container (may crop), contain fits the full image inside the container.

« Previous Next »