CSS Backgrounds

CSS background properties control what appears behind the content of an HTML element. A background can be a solid color, a gradient, an image, or a combination of these. Backgrounds greatly affect the overall visual feel of a web page.

CSS Background Properties

1. background-color

Sets a solid color as the background of an element.

body {
    background-color: #f0f0f0;
}

.card {
    background-color: white;
}

2. background-image

Sets an image as the background. The image path is provided inside url().

body {
    background-image: url("images/pattern.png");
}

By default, the background image will repeat horizontally and vertically to fill the element.

3. background-repeat

Controls how the background image repeats.

body {
    background-image: url("images/logo.png");
    background-repeat: no-repeat;  /* Image appears only once */
}

Possible values:

• repeat – Repeats both horizontally and vertically (default).
• repeat-x – Repeats only horizontally.
• repeat-y – Repeats only vertically.
• no-repeat – Image appears exactly once, no repetition.

4. background-position

Sets where the background image is placed within the element.

div {
    background-image: url("images/banner.jpg");
    background-repeat: no-repeat;
    background-position: center top;
}

Positions can be set using keywords (top, bottom, left, right, center) or exact values like pixels or percentages.

background-position: 50% 50%;   /* Centers the image */
background-position: 20px 40px; /* 20px from left, 40px from top */

5. background-size

Controls how large the background image is displayed.

div {
    background-image: url("images/hero.jpg");
    background-size: cover;
}

Common values:

• auto – Displays the image at its original size (default).
• cover – Scales the image to cover the entire element, cropping if needed. Most used for full-page backgrounds.
• contain – Scales the image to fit fully inside the element without cropping.
• 100px 200px – Sets exact width and height.

6. background-attachment

Defines whether the background image scrolls with the page or stays fixed in place.

body {
    background-image: url("images/texture.jpg");
    background-attachment: fixed;  /* Background stays in place when scrolling */
}

• scroll – Background scrolls with the page (default).
• fixed – Background stays fixed in place, creating a parallax-like effect.

7. background Shorthand

All background properties can be combined into one shorthand background property to keep the code compact.

/* Longhand */
div {
    background-color: #fff;
    background-image: url("images/pattern.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Shorthand equivalent */
div {
    background: #fff url("images/pattern.png") no-repeat center center / cover;
}

Full Background Example

header {
    background-image: url("images/hero.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: #001a33;  /* Fallback color if image fails to load */
}

Setting a background-color as a fallback is good practice. If the image file is missing or slow to load, the user still sees a color rather than a blank white area.

CSS Gradient as Background

CSS also allows gradient colors as backgrounds without any image file.

/* Linear Gradient — left to right */
div {
    background: linear-gradient(to right, #00b4db, #0083b0);
}

/* Linear Gradient — top to bottom */
section {
    background: linear-gradient(to bottom, #f8f9fa, #e0e0e0);
}

Summary

CSS background properties provide full control over the visual backdrop of any HTML element. background-color sets a solid color, while background-image with its companion properties handles image backgrounds. The background shorthand is useful for writing all settings concisely. Mastering backgrounds is essential for designing attractive web page layouts.