Tutorials CSS Backgrounds

Introduction to CSS

What is CSS? CSS Selectors

Colors & Backgrounds

CSS Colors Backgrounds

Text & Fonts

Text Styling Web Fonts

Box Model

The Box Model Display & Positioning

Layout

Flexbox CSS Grid

Responsive Design

Media Queries Units & Sizing

Animations & Effects

Transitions & Transforms CSS Animations

Advanced CSS

Pseudo-classes & Pseudo-elements CSS Variables & Best Practices

CSS Beginner FREE

Backgrounds

Lesson 2 of 16 Beginner Interactive

CSS background properties let you set colors, images, gradients, and control how they display.

Background Properties

background-color — solid background color
background-image — set an image or gradient
background-repeat — control tiling: repeat, no-repeat, repeat-x, repeat-y
background-position — position the image: center, top left, 50% 50%
background-size — size the image: cover, contain, specific values
background-attachment — scroll behavior: scroll, fixed
background — shorthand for all properties

Linear Gradients

linear-gradient(to right, #fff, #000) creates a smooth color transition.

Syntax

CSS

/* Background Color */
.box { background-color: #f0f4ff; }

/* Background Image */
.hero {
    background-image: url("banner.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Shorthand */
.hero {
    background: url("banner.jpg") no-repeat center/cover;
}

/* Linear Gradient */
.gradient {
    background: linear-gradient(to right, #1e3a8a, #7c3aed);
}

Background Properties

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Background Properties</title>
    <style>
        body { margin: 0; font-family: Arial, sans-serif; }
        .hero {
            background-color: #3498db;
            background-image: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25));
            background-size: cover;
            background-position: center;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 200px;
        }
        .pattern {
            background-color: #2c3e50;
            background-image: radial-gradient(circle, #fff 1px, transparent 1px);
            background-size: 20px 20px;
            min-height: 80px;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <div class="hero"><h1>background-color: #3498db</h1></div>
    <div class="pattern"></div>
</body>
</html>

Try It Yourself

Practice

Exercise

Set a hero section with a gradient background from dark blue to purple.

Answer

.hero {
    background: linear-gradient(135deg, #1e3a8a, #7c3aed);
    color: white;
    padding: 60px;
}

Exercise

Create a background image that covers the entire element without repeating.

Answer

.banner {
    background: url("image.jpg") no-repeat center/cover;
}

Quick Quiz

Which background-size value scales the image to cover the entire container?

contain

cover

100%

auto

"cover" scales the image to fill the container while maintaining aspect ratio.

What does background-repeat: no-repeat do?

Hides the image

Shows the image only once

Repeats infinitely

Centers the image

It prevents the background image from tiling/repeating.

Interview Questions

"cover" scales the image to fill the entire container, potentially cropping parts that overflow. "contain" scales the image to fit inside the container, potentially leaving empty space. Use cover for hero sections and contain for logos or icons.

Use background-attachment: fixed on a background image. When the user scrolls, the background stays fixed while the content moves over it, creating a parallax depth effect. This is a pure CSS approach, though more advanced parallax may require JavaScript.

CSS Colors

Tutorial Complete

Back to CSS