CSS Backgrounds: Colors, Images, Gradients and Positioning

CSS properties for backgrounds allow complete control over the appearance of HTML elements. With them, we can set the background color, add images, determine their position, size, repetition method, and even create advanced gradient transitions. The background property is a shorthand form for setting all individual background properties at once in a single line of code.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Background Examples</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        .container {
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }

        /* Example with background color */
        .example-color {
            background-color: #e3f2fd;
            color: #333333 !important;
            padding: 15px;
            margin-bottom: 10px;
            -webkit-text-fill-color: #333333 !important;
        }

        /* Example with background image */
        .example-image {
            background-image: url("img/narava3.png");
            background-repeat: no-repeat;
            background-size: cover;
            padding: 20px;
            margin-bottom: 10px;
            min-height: 200px;
            color: white !important;
            text-shadow: 1px 1px 2px black;
            -webkit-text-fill-color: white !important;
        }

        /* Example with gradient */
        .example-gradient {
            background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
            color: #333333 !important;
            padding: 15px;
            margin-bottom: 10px;
            -webkit-text-fill-color: #333333 !important;
        }

        /* Example with fixed background */
        .example-fixed {
            background-image: url("img/narava1.png");
            background-attachment: fixed;
            background-position: center;
            background-size: cover;
            height: 200px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white !important;
            text-shadow: 2px 2px 4px black;
            -webkit-text-fill-color: white !important;
        }

        /* Example with multiple backgrounds */
        .example-multi {
            background-image: url("img/narava2.png"), linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
            background-blend-mode: overlay;
            background-position: center;
            background-size: cover;
            padding: 15px;
            color: white !important;
            text-shadow: 1px 1px 2px black;
            min-height: 150px;
            -webkit-text-fill-color: white !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="example-color">
            <h2>Background Color</h2>
            <p>Example of a simple background color using background-color.</p>
        </div>

        <div class="example-image">
            <h2>Background Image</h2>
            <p>Example of a nature image as a background with cover size.</p>
        </div>

        <div class="example-gradient">
            <h2>Gradient Background</h2>
            <p>Example of a linear gradient as a background.</p>
        </div>

        <div class="example-fixed">
            <h2>Fixed Background</h2>
        </div>

        <div class="example-multi">
            <h2>Multi-layer Background</h2>
            <p>Example of combining an image and gradient overlay.</p>
        </div>
    </div>
</body>
</html>

RESULT

Property	Example	Description
Basic Properties
`background`	`background: #fff url(img.jpg) no-repeat center;`	Shorthand property for all background properties at once
`background-color`	`background-color: #f0f0f0;`	Sets the background color of an element
`background-image`	`background-image: url("image.jpg");`	Sets an image as the background of an element
Position and Repeat
`background-position`	`background-position: center top;`	Sets the starting position of the background image
`background-repeat`	`background-repeat: no-repeat;`	Repeats the image (repeat, no-repeat, repeat-x, repeat-y)
`background-size`	`background-size: cover;`	Sets the size of the background image (cover, contain, px, %)
Attachment and Clipping
`background-attachment`	`background-attachment: fixed;`	Sets whether the background image is scrollable or fixed
`background-origin`	`background-origin: padding-box;`	Sets the origin position of the image (border-box, padding-box, content-box)
`background-clip`	`background-clip: border-box;`	Sets how far the background extends (border-box, padding-box, content-box)
Gradients
`linear-gradient`	`background: linear-gradient(to right, red, blue);`	Linear gradient (from one edge to another)
`radial-gradient`	`background: radial-gradient(circle, red, blue);`	Radial gradient (from center outward)
Advanced
`background-blend-mode`	`background-blend-mode: multiply;`	Blends multiple backgrounds (color + image + gradient)
`multiple backgrounds`	`background: url(a.jpg), url(b.jpg);`	Multiple backgrounds at once (stacked on top of each other)

CSS Backgrounds: Colors, Images, Gradients and Positioning

Vadnica.org

Links

Support