Home / HTML / Images / Background Images

HTML Background Images

What are Background Images?

Background images are images displayed behind the content of an element. They are typically added using CSS with the background-image property. Background images are decorative and don't require alt text since they don't convey essential information.

CSS Background-Image Property

Background images are set using the CSS background-image property. The value should be a URL to the image:

Example

<style>
    body {
        background-image: url('background.jpg');
    }
</style>

Background Image on Body

To set a background image for the entire page, apply it to the body element:

Example

<style>
    body {
        background-image: url('background.jpg');
    }
</style>
<body>
    <h1>Page Title</h1>
    <p>Content with background image.</p>
</body>

Background Image on Div

You can apply background images to any element:

Example

<style>
    .box {
        background-image: url('pattern.jpg');
        width: 300px;
        height: 200px;
        padding: 20px;
        border: 2px solid black;
    }
</style>
<div class="box">
    <p>This div has a background image.</p>
</div>

Background Repeat

By default, background images repeat both horizontally and vertically. Use background-repeat to control this:

Example

<style>
    .repeat {
        background-image: url('pattern.jpg');
        background-repeat: repeat; /* Default - repeats both ways */
    }
    .no-repeat {
        background-image: url('pattern.jpg');
        background-repeat: no-repeat; /* No repetition */
    }
    .repeat-x {
        background-image: url('pattern.jpg');
        background-repeat: repeat-x; /* Repeat horizontally only */
    }
    .repeat-y {
        background-image: url('pattern.jpg');
        background-repeat: repeat-y; /* Repeat vertically only */
    }
</style>
<div class="repeat" style="width: 300px; height: 200px; border: 1px solid black;">Repeat (default)</div>
<div class="no-repeat" style="width: 300px; height: 200px; border: 1px solid black;">No repeat</div>

Background Position

Use background-position to control where the background image is positioned:

Example

<style>
    .center {
        background-image: url('image.jpg');
        background-repeat: no-repeat;
        background-position: center;
    }
    .top-left {
        background-image: url('image.jpg');
        background-repeat: no-repeat;
        background-position: top left;
    }
    .bottom-right {
        background-image: url('image.jpg');
        background-repeat: no-repeat;
        background-position: bottom right;
    }
</style>

Background Size

Use background-size to control the size of the background image:

Example

<style>
    .cover {
        background-image: url('image.jpg');
        background-size: cover; /* Cover entire element */
        background-repeat: no-repeat;
    }
    .contain {
        background-image: url('image.jpg');
        background-size: contain; /* Fit entire image */
        background-repeat: no-repeat;
    }
    .custom {
        background-image: url('image.jpg');
        background-size: 200px 150px; /* Specific size */
        background-repeat: no-repeat;
    }
</style>

Background Attachment

Use background-attachment to control if the background scrolls with content:

Example

<style>
    .scroll {
        background-image: url('image.jpg');
        background-attachment: scroll; /* Scrolls with content */
    }
    .fixed {
        background-image: url('image.jpg');
        background-attachment: fixed; /* Fixed position */
    }
</style>

Complete Background Shorthand

You can set all background properties at once using the background shorthand property:

Example

<style>
    .short {
        background: url('image.jpg') no-repeat center center / cover fixed;
        /* image repeat position / size attachment */
    }
</style>

Multiple Background Images

You can layer multiple background images:

Example

<style>
    .multiple {
        background-image: url('layer1.jpg'), url('layer2.jpg');
        background-position: top left, bottom right;
        background-repeat: no-repeat, repeat;
    }
</style>

Best Practices

Use background images for decoration: Not for essential content
Optimize image size: Large background images can slow down page loading
Consider text readability: Ensure text is readable over background images
Use CSS, not HTML attributes: The background attribute is deprecated in HTML5
Provide fallback colors: Always specify a background-color as fallback
Test responsiveness: Background images may need different sizes for mobile

Deprecated HTML Background Attribute

The HTML background attribute is deprecated. Use CSS instead:

Example - Don't Use (Deprecated)

<body background="image.jpg"></body>

Example - Modern Way (CSS)

<style>
    body {
        background-image: url('image.jpg');
    }
</style>

← Image Maps Favicon →