Skillversitas

CSS Background

Background is one of the most impactful design aspects in CSS. CSS provides many properties to control colors, images, gradients, and various other background effects.

1. background-color

The background-color property sets the background color of an element.

/* Named colors */
body {
    background-color: white;
}

/* HEX */
.container {
    background-color: #f8f9fa;
}

/* RGB */
.card {
    background-color: rgb(255, 255, 255);
}

/* HSL */
.section {
    background-color: hsl(210, 100%, 98%);
}

/* Transparent */
.overlay {
    background-color: transparent;
}

/* RGBA (semi-transparent) */
.modal {
    background-color: rgba(0, 0, 0, 0.8);
}

<body style="background-color: #f0f0f0;">
    <div class="container">
        <div class="card" style="background-color: white;">
            <p>Card with a white background</p>
        </div>
    </div>
</body>

2. background-image

The background-image property sets an image as the background.

/* Background image */
.hero {
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* Pattern background */
.pattern {
    background-image: url('pattern.png');
    background-repeat: repeat;
}

/* Multiple backgrounds */
.complex-bg {
    background-image: url('overlay.png'), url('main.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* Color fallback */
.element {
    background-color: #3498db;  /* Fallback if the image fails to load */
    background-image: url('bg.jpg');
    background-size: cover;
}

<div class="hero">
    <h1>Welcome</h1>
</div>

<div class="pattern">
    <p>Background with a pattern</p>
</div>

Important Tips

  • Always provide a background-color as a fallback
  • Use optimized images (WebP, AVIF)
  • Consider file size for performance

3. background-repeat

The background-repeat property controls how the background image is repeated.

/* Default: repeat in all directions */
.default {
    background-image: url('pattern.png');
    background-repeat: repeat;
}

/* Not repeated */
.no-repeat {
    background-image: url('logo.png');
    background-repeat: no-repeat;
}

/* Repeat horizontally only */
.repeat-x {
    background-image: url('line.png');
    background-repeat: repeat-x;
}

/* Repeat vertically only */
.repeat-y {
    background-image: url('line.png');
    background-repeat: repeat-y;
}

/* Remaining space is not filled */
.space {
    background-image: url('pattern.png');
    background-repeat: space;
}

/* Repeating pattern with a specific size */
.dots {
    background-image: url('dot.png');
    background-repeat: repeat;
    background-size: 30px 30px;
}

<div class="no-repeat">
    <p>The image appears only once</p>
</div>

<div class="repeat-x">
    <p>The image repeats horizontally</p>
</div>

4. background-position

The background-position property determines the position of the background image within an element.

/* Keyword values */
.center {
    background-position: center;
}

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

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

/* Pixel values */
.pixel-position {
    background-image: url('icon.png');
    background-position: 50px 100px;  /* 50px from the left, 100px from the top */
    background-repeat: no-repeat;
}

/* Percentage values */
.percentage-position {
    background-position: 25% 75%;  /* 25% from the left, 75% from the top */
}

/* Combination */
.combined {
    background-position: right 20px top 10px;
}

/* Responsive position */
.hero {
    background-position: center;
}

@media (max-width: 768px) {
    .hero {
        background-position: right center;
    }
}

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .demo {
            width: 400px;
            height: 300px;
            background-color: #f0f0f0;
            background-image: url('bg.jpg');
            background-repeat: no-repeat;
            border: 2px solid #ddd;
            margin: 10px;
            display: inline-block;
        }

        .pos-center { background-position: center; }
        .pos-top-left { background-position: top left; }
        .pos-top-right { background-position: top right; }
        .pos-bottom-left { background-position: bottom left; }
        .pos-bottom-right { background-position: bottom right; }
        .pos-custom { background-position: 100px 50px; }
    </style>
</head>
<body>
    <div class="demo pos-center">Center</div>
    <div class="demo pos-top-left">Top Left</div>
    <div class="demo pos-top-right">Top Right</div>
    <div class="demo pos-bottom-left">Bottom Left</div>
    <div class="demo pos-bottom-right">Bottom Right</div>
    <div class="demo pos-custom">100px 50px</div>
</body>
</html>

5. background-size

The background-size property controls the size of the background image.

/* Cover: fills the entire area, may be cropped */
.cover {
    background-size: cover;
}

/* Contain: fits the entire image, may leave empty space */
.contain {
    background-size: contain;
}

/* Pixel values */
.fixed-size {
    background-size: 300px 200px;
}

/* Percentage */
.percentage {
    background-size: 100% 100%;  /* Stretch fully */
}

/* Auto: original size */
.auto {
    background-size: auto;
}

/* Combination */
.combined {
    background-size: 100% auto;  /* Full width, automatic height */
}

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

@media (max-width: 768px) {
    .hero {
        background-size: cover;
        height: 50vh;
    }
}

Difference between cover and contain

cover:                         contain:
┌──────────────────┐           ┌──────────────────┐
│   ┌──────────┐   │           │   ┌──────────┐   │
│   │  IMAGE   │   │           │   │  IMAGE   │   │
│   │  (crop)  │   │           │   │ (full)   │   │
│   └──────────┘   │           │   └──────────┘   │
│                  │           │                  │
└──────────────────┘           └──────────────────┘
Image fills the area,          Image is fully visible,
part of it is cropped          there is empty space on the sides

6. background-attachment

The background-attachment property controls whether the background scrolls or stays fixed.

/* Default: scrolls with the content */
.scroll {
    background-attachment: scroll;
}

/* Fixed: stays in place when scrolling */
.fixed {
    background-attachment: fixed;
    background-image: url('bg.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
}

/* Local: scrolls with the element's content */
.local {
    background-attachment: local;
    overflow: scroll;
    height: 300px;
    background-image: url('pattern.png');
}

/* Parallax effect */
.parallax-section {
    background-image: url('parallax-bg.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

<div class="parallax-section">
    <h1>Parallax Effect</h1>
    <p>The background image stays in place when the content is scrolled</p>
</div>

<div style="height: 100vh; background: white;">
    <p>Content below the parallax</p>
</div>

7. Background Shorthand

All background properties can be written in a single shorthand notation.

/* background: color image repeat position size attachment */
.hero {
    background: #3498db url('hero.jpg') no-repeat center/cover fixed;
}

/* Minimal shorthand */
.simple {
    background: white url('bg.png') no-repeat;
}

/* With all properties */
.complete {
    background: 
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('image.jpg')
        no-repeat
        center
        / cover
        fixed;
}

/* Shorthand for a pattern */
.pattern {
    background: #f0f0f0 url('pattern.png') repeat;
}

/* Transparent background */
.overlay {
    background: rgba(0, 0, 0, 0.7);
}

8. Linear Gradient

linear-gradient() creates a straight (linear) color transition.

/* Basic gradient */
.gradient-basic {
    background: linear-gradient(blue, green);
}

/* Gradient with an angle */
.gradient-angle {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Horizontal gradient */
.gradient-horizontal {
    background: linear-gradient(to right, #ff6b6b, #feca57);
}

/* Gradient with multiple color stops */
.gradient-multi {
    background: linear-gradient(90deg, red, orange, yellow, green, blue, violet);
}

/* Gradient with position stops */
.gradient-stops {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #e74c3c 100%);
}

/* Hard stops (no smooth transition) */
.gradient-hard {
    background: linear-gradient(135deg, #3498db 50%, #e74c3c 50%);
}

/* Transparent gradient */
.gradient-fade {
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
}

Gradient Applications

/* Hero section */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 100px 20px;
    text-align: center;
}

/* Button gradient */
.btn-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

/* Card header gradient */
.card-header {
    background: linear-gradient(135deg, #2c3e50, #3498db);
    color: white;
    padding: 20px;
    border-radius: 8px 8px 0 0;
}

/* Text gradient */
.text-gradient {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 3rem;
    font-weight: 700;
}

<div class="hero">
    <h1>Welcome</h1>
    <p>Website with a gradient background</p>
    <button class="btn-gradient">Start Now</button>
</div>

<h1 class="text-gradient">Gradient Text</h1>

9. Radial Gradient

radial-gradient() creates a color transition from a center point (radial).

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

/* Ellipse (default) */
.radial-ellipse {
    background: radial-gradient(ellipse, #3498db, #2c3e50);
}

/* Center position */
.radial-top {
    background: radial-gradient(circle at top, #667eea, #764ba2);
    height: 300px;
}

.radial-bottom-right {
    background: radial-gradient(circle at bottom right, #3498db, #2c3e50);
    height: 300px;
}

/* Multiple radial gradients */
.multiple-radial {
    background: 
        radial-gradient(circle at 20% 80%, rgba(52, 152, 219, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(155, 89, 182, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    height: 400px;
}

/* Circle with specific size */
.radial-sized {
    background: radial-gradient(circle closest-side, #3498db, #2c3e50);
}

<div class="radial-basic">
    <p>Radial gradient</p>
</div>

<div class="multiple-radial">
    <p>Multiple radial gradients</p>
</div>

10. Repeating Linear Gradient

repeating-linear-gradient() creates a repeating gradient.

/* Stripe pattern */
.stripes {
    background: repeating-linear-gradient(
        45deg,
        #3498db,
        #3498db 10px,
        #2980b9 10px,
        #2980b9 20px
    );
    height: 200px;
}

/* Horizontal stripes */
.horizontal-stripes {
    background: repeating-linear-gradient(
        0deg,
        #f0f0f0,
        #f0f0f0 2px,
        #fff 2px,
        #fff 4px
    );
}

/* Diagonal stripes */
.diagonal-stripes {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(52, 152, 219, 0.1) 10px,
        rgba(52, 152, 219, 0.1) 20px
    );
}

/* Gradient border */
.gradient-border {
    border: 10px solid transparent;
    background-image: 
        linear-gradient(white, white),
        linear-gradient(135deg, #667eea, #764ba2);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Progress bar */
.progress {
    height: 20px;
    background: repeating-linear-gradient(
        -45deg,
        #3498db,
        #3498db 10px,
        #2980b9 10px,
        #2980b9 20px
    );
    background-size: 28px 28px;
    animation: progress 1s linear infinite;
    border-radius: 10px;
}

@keyframes progress {
    0% { background-position: 0 0; }
    100% { background-position: 28px 0; }
}

<div class="stripes">
    <p>Stripe pattern</p>
</div>

<div class="gradient-border">
    <p>Text with a gradient border</p>
</div>

<div class="progress"></div>

11. Multiple Backgrounds

CSS supports multiple stacked backgrounds.

/* Multiple backgrounds */
.multi-bg {
    background-image: 
        url('overlay.png'),
        linear-gradient(135deg, #667eea 0%, #764ba2 100%),
        url('main.jpg');
    background-size: 
        cover,
        cover,
        cover;
    background-position: 
        center,
        center,
        center;
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat;
}

/* Shorthand for multiple backgrounds */
.multi-bg-shorthand {
    background: 
        url('overlay.png') no-repeat center / cover,
        linear-gradient(135deg, #667eea, #764ba2) no-repeat center / cover,
        url('main.jpg') no-repeat center / cover;
}

/* Hero with a dark overlay */
.hero-overlay {
    background: 
        linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
        url('hero.jpg') no-repeat center / cover;
    color: white;
    padding: 100px 20px;
}

/* Pattern on top of a gradient */
.pattern-gradient {
    background: 
        url('pattern.png') repeat,
        linear-gradient(135deg, #3498db, #2c3e50);
}

Practice: Hero Section

/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9)),
        url('hero.jpg') no-repeat center / cover;
    z-index: -2;
}

.hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.03) 10px,
        rgba(255,255,255,0.03) 20px
    );
    z-index: -1;
}

.hero-content {
    max-width: 800px;
    padding: 0 20px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.hero-btn {
    display: inline-block;
    padding: 15px 40px;
    background-color: white;
    color: #667eea;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.1rem; }
}

<section class="hero-section">
    <div class="hero-bg"></div>
    <div class="hero-pattern"></div>
    <div class="hero-content">
        <h1 class="hero-title">Welcome to Our Website</h1>
        <p class="hero-subtitle">Building the digital future with technological innovation</p>
        <a href="#" class="hero-btn">Start Now</a>
    </div>
    <div class="hero-scroll">↓</div>
</section>

Practice: Pattern Background

/* Background Pattern */
.pattern-dots {
    background-color: #ffffff;
    background-image: radial-gradient(#ddd 1px, transparent 1px);
    background-size: 20px 20px;
    padding: 40px;
}

.pattern-grid {
    background-color: #f8f9fa;
    background-image: 
        linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    padding: 40px;
}

.pattern-zigzag {
    background: 
        linear-gradient(135deg, #fff 25%, transparent 25%) -50px 0,
        linear-gradient(225deg, #fff 25%, transparent 25%) -50px 0,
        linear-gradient(315deg, #fff 25%, transparent 25%),
        linear-gradient(45deg, #fff 25%, transparent 25%);
    background-size: 100px 100px;
    background-color: #3498db;
    padding: 40px;
}

<div class="pattern-dots">
    <h2>Pattern Dots</h2>
</div>

<div class="pattern-grid">
    <h2>Pattern Grid</h2>
</div>

<div class="pattern-zigzag">
    <h2>Pattern Zigzag</h2>
</div>

Summary

CSS provides rich background properties: background-color, background-image, background-repeat, background-position, background-size, background-attachment, and the background shorthand. Gradients (linear, radial, repeating) enable visual effects without images. Multiple backgrounds allow images and gradients to be stacked. Combining these properties enables complex and interactive background designs.