CSS background-image Property: Background Images in CSS

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

How to Use CSS background-image

The background-image property applies a background image to an element. You specify the image URL using the url() function.

element {
    background-image: url(path);
}

• background-image: Applies a background image to an element.
• url(): The CSS function to include images and other files.
• path: The path to the image file, either as a relative path or a full URL.

Basic Usage

header {
    background-image: url('header-background.jpg');
}

When to Use CSS background-image

You need the background-image property to define an element's background image.

Enhancing Visual Appeal

You can add eye-catching visuals to sections of your website using background-image.

header {
    background-image: url('header-background.jpg');
    background-size: cover;
    background-position: center;
}

Text Overlay

You can also create compelling text overlay effects by combining opacity settings with background-image.

.section {
    background-image: url('section-background.jpg');
    position: relative;
}
.section::before {
    content: "";
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}
.section-text {
    position: relative;
    color: white;
}

Hero Sections

You can use background images for prominent sections at the top of pages called hero sections.

.hero {
    background-image: url('hero-background.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
}

Examples of Using CSS background-image

Web Designs

Design frameworks use background-image to create strong visual themes for their templates.

.container {
    background-image: url('web-design.jpg');
    background-size: cover;
    background-position: center;
}

Marketing Pages

Marketing websites and landing pages add background images to highlight key elements of a web page.

.marketing-section {
    background-image: url('marketing-background.jpg');
    background-size: cover;
    background-position: center;
}

Portfolio Websites

Finally, portfolio websites might use background-image to showcase projects, catching the attention of potential clients and employers.

.portfolio-item {
    background-image: url('portfolio-background.jpg');
    background-size: cover;
    background-position: center;
}

Learn More About CSS Background Properties

CSS Background Image Size

The property background-size in CSS determines the size of the background image. You can set it to cover, contain, or specific dimensions to control how the image fits within the element.

element {
    background-image: url('path/to/image.jpg');
    background-size: cover; /* or contain */
}

CSS Background Position

The background-position property sets the starting position of the background image. This helps align the image as desired within the element.

element {
    background-image: url('path/to/image.jpg');
    background-position: center; /* or top left, etc. */
}

CSS Background Repeat

By default, background images that are smaller than their parent element repeat horizontally and vertically. With the background-repeat property, you can specify if and how the background image should repeat. You can prevent repetition or repeat the image along the x or y axis.

element {
    background-image: url('path/to/image.jpg');
    background-repeat: no-repeat; /* or repeat-x, repeat-y */
}

CSS Background Attachment

The background-attachment property dictates the scrolling behavior of the background image. You can set it to scroll with the element’s content or fixed so that it stays in place when the rest of the page scrolls.

element {
    background-image: url('path/to/image.jpg');
    background-attachment: fixed; /* or scroll */
}

Background Image Opacity in CSS

At the moment, there's no dedicated CSS background-opacity property. To create transparency, you need to use a pseudo-element or RGBA colors for the background. This method allows you to control the opacity of the background image without affecting the opacity of other content.

element::before {
    content: "";
    background-image: url('panda.png');
    opacity: 0.5;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
}

Full-Screen Background Images

You can style the body element with a background image to create full-page backgrounds.

body {
    background-image: url('full-screen.png');
    background-size: cover;
    background-position: center;
}

Multiple Background Images

You can use multiple background images for a single element by separating them with a comma. This can create layered effects and add depth to your designs.

element {
    background-image: url('background1.jpg'), url('background2.png');
    background-size: cover, contain;
    background-position: center, top left;
}