Backgrounds - Background Properties

What are Background Properties?

Background properties control the background appearance of elements, including colors, images, gradients, positioning, and sizing.

Background Properties - Quick Reference

Property	Description	Example
`background-color`	Background color	`background-color: #007bff;`
`background-image`	Background image	`background-image: url('image.jpg');`
`background-repeat`	Image repetition	`background-repeat: no-repeat;`
`background-position`	Image position	`background-position: center;`
`background-size`	Image size	`background-size: cover;`
`background-attachment`	Scroll behavior	`background-attachment: fixed;`
`background-origin`	Positioning area	`background-origin: padding-box;`
`background-clip`	Painting area	`background-clip: border-box;`
`background`	Shorthand	`background: #fff url('img.jpg') no-repeat center/cover;`

Detailed Examples

1. background-color

.box {
    background-color: #007bff;
}

.transparent {
    background-color: rgba(0, 123, 255, 0.5);
}

2. background-image

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

.gradient {
    background-image: linear-gradient(to right, #007bff, #6c757d);
}

.multiple {
    background-image: url('overlay.png'), url('background.jpg');
}

3. background-repeat

.no-repeat {
    background-repeat: no-repeat;
}

.repeat-x {
    background-repeat: repeat-x; /* Horizontal only */
}

.repeat-y {
    background-repeat: repeat-y; /* Vertical only */
}

.repeat {
    background-repeat: repeat; /* Both directions */
}

4. background-position

.center {
    background-position: center;
}

.top-right {
    background-position: top right;
}

.custom {
    background-position: 50px 100px; /* x y */
}

.percentage {
    background-position: 50% 50%;
}

5. background-size

.cover {
    background-size: cover; /* Fill container, may crop */
}

.contain {
    background-size: contain; /* Fit inside, may have gaps */
}

.custom {
    background-size: 200px 100px; /* width height */
}

.auto {
    background-size: auto; /* Original size */
}

6. background-attachment

.fixed {
    background-attachment: fixed; /* Parallax effect */
}

.scroll {
    background-attachment: scroll; /* Scrolls with content */
}

Common Patterns

Pattern 1: Hero Section

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

Pattern 2: Gradient Background

.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.radial-gradient {
    background: radial-gradient(circle, #667eea, #764ba2);
}

Pattern 3: Pattern Background

.pattern {
    background-image: url('pattern.png');
    background-repeat: repeat;
    background-size: 50px 50px;
}

Pattern 4: Overlay

.overlay {
    background-image: 
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('image.jpg');
    background-size: cover;
    background-position: center;
}

Backgrounds - Background Properties

On this page