CSS Background-Image Property: Complete Guide

Syntax and Values

The background-image property accepts various image sources and gradients:

/* Syntax */
background-image: none | url() | gradient | inherit | initial | unset;

/* Single image */
background-image: url('image.jpg');

/* Multiple images */
background-image: url('top.png'), url('bottom.png');

/* Gradients */
background-image: linear-gradient(to right, #000, #333);
background-image: radial-gradient(circle, #000, #fff);

/* Combination */
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                  url('hero.jpg');

Property Values

Image Types & Formats

1. Raster Images

/* Common image formats */
background-image: url('photo.jpg');   /* JPEG - best for photos */
background-image: url('logo.png');    /* PNG - supports transparency */
background-image: url('image.webp');  /* WebP - modern, efficient */
background-image: url('icon.svg');    /* SVG - scalable vectors */

/* With quotes or without */
background-image: url(image.jpg);     /* No quotes */
background-image: url('image.jpg');   /* Single quotes */
background-image: url("image.jpg");   /* Double quotes */

2. Data URIs

/* Inline SVG */
background-image: url('data:image/svg+xml,');

/* Base64 encoded image */
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANS...');

3. Image Loading States

/* Fallback for failed images */
.hero {
    background-color: #000; /* Fallback color */
    background-image: url('hero.jpg');
}

/* Loading placeholder */
.lazy-bg {
    background-color: #111;
    background-image: url('placeholder.svg');
}

.lazy-bg.loaded {
    background-image: url('full-image.jpg');
}

CSS Gradients as Background Images

Linear Gradients

background-image: 
    linear-gradient(
        to right, 
        #000, #333
    );

background-image: 
    linear-gradient(
        45deg, 
        #000, #111, #000
    );

background-image: 
    linear-gradient(
        to bottom, 
        #000 0%, 
        #111 50%, 
        #000 100%
    );

Radial Gradients

background-image: 
    radial-gradient(
        circle, 
        #333, #000
    );

background-image: 
    radial-gradient(
        ellipse at top, 
        #222, #000
    );

background-image: 
    radial-gradient(
        circle at 20% 80%, 
        #333, #000
    );

Complex Gradient Patterns

/* Mesh gradient effect */
.mesh-gradient {
    background-color: #000;
    background-image: 
        radial-gradient(at 20% 80%, #1a1a1a 0%, transparent 50%),
        radial-gradient(at 80% 20%, #111 0%, transparent 50%),
        radial-gradient(at 40% 40%, #0a0a0a 0%, transparent 50%);
}

/* Repeating gradients */
.stripes {
    background-image: repeating-linear-gradient(
        45deg,
        #000,
        #000 10px,
        #111 10px,
        #111 20px
    );
}

Positioning & Sizing Background Images

Background Size

/* Cover - image covers entire container */
.cover {
    background-image: url('image.jpg');
    background-size: cover;
    background-position: center;
}

/* Contain - image fits within container */
.contain {
    background-image: url('logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Specific dimensions */
.custom-size {
    background-image: url('pattern.png');
    background-size: 100px 100px;
    /* or percentages */
    background-size: 50% auto;
}

Background Position

/* Keywords */
background-position: center;
background-position: top left;
background-position: bottom right;

/* Percentages */
background-position: 50% 50%;
background-position: 25% 75%;

/* Pixels */
background-position: 100px 200px;
background-position: -50px 0;

/* Multiple values for multiple images */
background-image: url('top.png'), url('bottom.png');
background-position: top center, bottom center;

Background Attachment

/* Fixed background - parallax effect */
.parallax {
    background-image: url('landscape.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* Scrolling background (default) */
.normal {
    background-attachment: scroll;
}

/* Local - scrolls with element's content */
.local {
    background-attachment: local;
}

Performance & Optimization

Image Optimization Best Practices

/* Use responsive images */
.hero {
    background-image: url('hero-mobile.jpg');
}

@media (min-width: 768px) {
    .hero {
        background-image: url('hero-tablet.jpg');
    }
}

@media (min-width: 1200px) {
    .hero {
        background-image: url('hero-desktop.jpg');
    }
}

/* CSS for lazy loading */
.lazy-bg {
    background-color: #000; /* Placeholder */
}

.lazy-bg.loaded {
    background-image: url('full-image.jpg');
}

/* JavaScript */
const lazyBgs = document.querySelectorAll('.lazy-bg');
const bgObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('loaded');
            bgObserver.unobserve(entry.target);
        }
    });
});

lazyBgs.forEach(bg => bgObserver.observe(bg));

CSS-Only Alternatives

/* Replace images with CSS when possible */

/* Instead of noise texture image */
.css-noise {
    background-color: #000;
    background-image: 
        repeating-conic-gradient(#000 0%, #111 5%, #000 10%);
    background-size: 100px 100px;
}

/* Instead of gradient image */
.css-gradient {
    background: linear-gradient(135deg, #000 0%, #333 100%);
}

/* Instead of pattern image */
.css-pattern {
    background-color: #000;
    background-image: 
        linear-gradient(45deg, #111 25%, transparent 25%),
        linear-gradient(-45deg, #111 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #111 75%),
        linear-gradient(-45deg, transparent 75%, #111 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

Responsive Background Images

Mobile-First Approach

/* Mobile first with progressive enhancement */
.responsive-bg {
    /* Mobile - smaller, optimized image */
    background-image: url('bg-mobile.jpg');
    background-size: cover;
    background-position: center;
}

/* Tablet */
@media (min-width: 768px) {
    .responsive-bg {
        background-image: url('bg-tablet.jpg');
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .responsive-bg {
        background-image: url('bg-desktop.jpg');
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .responsive-bg {
        background-image: url('[email protected]');
    }
}

Art Direction with Multiple Images

/* Different crops for different screens */
.art-directed {
    /* Portrait crop for mobile */
    background-image: url('portrait.jpg');
    background-position: center;
    background-size: cover;
}

@media (min-width: 768px) and (orientation: landscape) {
    .art-directed {
        /* Landscape crop for tablets/desktop */
        background-image: url('landscape.jpg');
    }
}

/* Combine with CSS custom properties */
:root {
    --bg-image: url('default.jpg');
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-image: url('dark-theme.jpg');
    }
}

.themed-bg {
    background-image: var(--bg-image);
}