|

CSS 5 💻 background related properties

Bykronos

CSS provides a rich set of properties to control the background of any element. You can set colors, images, gradients, and control how they are positioned, repeated, scaled, and clipped.

Overview of Background Properties

PropertyDescriptionExample
background-colorSets the background colorbackground-color: red;
background-imageSets the background image or gradientbackground-image: url("image.jpg");
background-repeatControls how the image repeatsbackground-repeat: no-repeat;
background-positionSets the position of the imagebackground-position: center top;
background-attachmentControls scrolling behaviorbackground-attachment: fixed;
background-clipDefines the clipping areabackground-clip: padding-box;
background-originSets the positioning originbackground-origin: border-box;
background-sizeControls the scaling of the imagebackground-size: cover;

1. background-color

Sets the color behind the content of the element.

/* Named colors */
.red-background {
    background-color: red;
}

/* Hexadecimal */
.hex-background {
    background-color: #123456;
}

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

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

/* HSL/HSLA */
.hsl-background {
    background-color: hsl(0, 100%, 50%);
}

.hsla-background {
    background-color: hsla(0, 100%, 50%, 0.5);
}

2. background-image

Sets the background to an image or a gradient.

/* Image */
.image-background {
    background-image: url("path/to/image.jpg");
}

/* Linear Gradient */
.gradient-background {
    background-image: linear-gradient(to right, red, orange);
}

/* Radial Gradient */
.radial-background {
    background-image: radial-gradient(circle, red, blue);
}

/* Multiple backgrounds */
.multiple-background {
    background-image: 
        url("top-image.png"),
        url("bottom-image.png");
}

3. background-repeat

Controls how the background image repeats.

ValueDescriptionExample
repeatRepeats both horizontally and vertically (default)background-repeat: repeat;
no-repeatDoes not repeatbackground-repeat: no-repeat;
repeat-xRepeats only horizontallybackground-repeat: repeat-x;
repeat-yRepeats only verticallybackground-repeat: repeat-y;
spaceRepeats with space between imagesbackground-repeat: space;
roundRepeats and stretches to fitbackground-repeat: round;
.repeated-background {
    background-image: url("path/to/image.jpg");
    background-repeat: repeat;
}

.no-repeat-background {
    background-image: url("path/to/image.jpg");
    background-repeat: no-repeat;
}

.repeat-x-background {
    background-image: url("path/to/image.jpg");
    background-repeat: repeat-x;
}

.repeat-y-background {
    background-image: url("path/to/image.jpg");
    background-repeat: repeat-y;
}

4. background-position

Sets the position of the background image relative to its container.

ValuesDescriptionExample
left, center, rightHorizontal positionbackground-position: center;
top, center, bottomVertical positionbackground-position: top;
x% y%Percentage valuesbackground-position: 50% 50%;
xpx ypxPixel valuesbackground-position: 100px 50px;
.positioned-background {
    background-image: url("path/to/image.jpg");
    background-repeat: no-repeat;
    background-position: center top;
}

/* Center the background */
.centered-background {
    background-position: center center;
}

/* Offset from the top-left */
.offset-background {
    background-position: 20px 30px;
}

/* Using percentages */
.percent-background {
    background-position: 75% 25%;
}

5. background-attachment

Controls whether the background image scrolls with the content.

ValueDescriptionExample
scrollScrolls with the page (default)background-attachment: scroll;
fixedFixed to the viewportbackground-attachment: fixed;
localScrolls with the element’s contentbackground-attachment: local;
/* Fixed background (parallax effect) */
.fixed-background {
    background-image: url("path/to/image.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

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

/* Local scrolling */
.local-background {
    background-attachment: local;
}

6. background-clip

Defines the area where the background is visible.

ValueDescriptionExample
border-boxExtends to the outer edge of the border (default)background-clip: border-box;
padding-boxExtends to the inside of the borderbackground-clip: padding-box;
content-boxExtends only to the content areabackground-clip: content-box;
textClips to the text (experimental)background-clip: text;
.clipped-background {
    background-image: url("path/to/image.jpg");
    background-repeat: no-repeat;
    background-clip: padding-box;
}

/* Clip to text (needs text color transparent) */
.text-clip {
    background-image: linear-gradient(to right, red, blue);
    background-clip: text;
    color: transparent;
}

7. background-origin

Sets the origin point for positioning the background image.

ValueDescriptionExample
border-boxOrigin at the upper-left corner of the borderbackground-origin: border-box;
padding-boxOrigin at the upper-left corner of the padding (default)background-origin: padding-box;
content-boxOrigin at the upper-left corner of the contentbackground-origin: content-box;
.origin-background {
    background-image: url("path/to/image.jpg");
    background-repeat: no-repeat;
    background-origin: border-box;
}

8. background-size

Controls the scaling of the background image.

ValueDescriptionExample
autoOriginal size (default)background-size: auto;
coverFills the entire container (may crop)background-size: cover;
containFits the entire image in the containerbackground-size: contain;
x% y%Percentage of the containerbackground-size: 100% 50%;
xpx ypxPixel valuesbackground-size: 300px 200px;
/* Cover the entire element */
.scaled-background {
    background-image: url("path/to/image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

/* Contain the entire image */
.contain-background {
    background-size: contain;
}

/* Specific dimensions */
.specific-size {
    background-size: 300px 200px;
}

/* Percentage of container */
.percent-size {
    background-size: 100% 50%;
}

The Shorthand background Property

You can combine multiple background properties into a single background shorthand.

/* Shorthand: image, position, size, repeat, attachment, color */
.background-shorthand {
    background: 
        url("image.jpg") 
        center center / cover 
        no-repeat 
        fixed 
        #f8f9fa;
}

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Properties</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .demo-box {
            height: 150px;
            border-radius: 8px;
            margin: 10px 0;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            border: 5px solid #333;
        }

        .demo-box.light-text {
            color: #333;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* ====== BACKGROUND DEMOS ====== */

        /* ---- background-color ---- */
        .bg-color-demo {
            background-color: #007bff;
        }

        .bg-color-rgba {
            background-color: rgba(255, 0, 0, 0.5);
            color: #333;
        }

        /* ---- background-image (gradients) ---- */
        .bg-gradient-linear {
            background-image: linear-gradient(to right, #007bff, #6c5ce7);
        }

        .bg-gradient-radial {
            background-image: radial-gradient(circle, #28a745, #1e7e34);
        }

        .bg-gradient-conic {
            background-image: conic-gradient(#ffc107, #dc3545, #007bff);
        }

        /* ---- background-image (image) ---- */
        .bg-image-demo {
            background-image: url('https://via.placeholder.com/400x200/007bff/ffffff?text=Background+Image');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

        /* ---- background-repeat ---- */
        .bg-repeat-repeat {
            background-image: url('https://via.placeholder.com/50x50/ff6b6b/ffffff?text=A');
            background-repeat: repeat;
            background-size: 50px 50px;
        }

        .bg-repeat-no-repeat {
            background-image: url('https://via.placeholder.com/50x50/4ecdc4/ffffff?text=B');
            background-repeat: no-repeat;
            background-position: center;
        }

        .bg-repeat-repeat-x {
            background-image: url('https://via.placeholder.com/50x50/ffc107/333333?text=C');
            background-repeat: repeat-x;
            background-size: 50px 50px;
        }

        .bg-repeat-repeat-y {
            background-image: url('https://via.placeholder.com/50x50/6c5ce7/ffffff?text=D');
            background-repeat: repeat-y;
            background-size: 50px 50px;
        }

        /* ---- background-position ---- */
        .bg-position-center {
            background-image: url('https://via.placeholder.com/100x100/007bff/ffffff?text=Center');
            background-repeat: no-repeat;
            background-position: center center;
        }

        .bg-position-top-left {
            background-image: url('https://via.placeholder.com/100x100/28a745/ffffff?text=TL');
            background-repeat: no-repeat;
            background-position: top left;
        }

        .bg-position-bottom-right {
            background-image: url('https://via.placeholder.com/100x100/dc3545/ffffff?text=BR');
            background-repeat: no-repeat;
            background-position: bottom right;
        }

        /* ---- background-attachment ---- */
        .bg-attachment-fixed {
            background-image: url('https://via.placeholder.com/400x300/6610f2/ffffff?text=Fixed');
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
            min-height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            text-shadow: 0 0 10px rgba(0,0,0,0.5);
        }

        /* ---- background-clip ---- */
        .bg-clip-border {
            background-image: url('https://via.placeholder.com/400x200/ffc107/333333?text=Border+Box');
            background-repeat: no-repeat;
            background-size: cover;
            background-clip: border-box;
            border: 10px dashed rgba(0,0,0,0.3);
        }

        .bg-clip-padding {
            background-image: url('https://via.placeholder.com/400x200/17a2b8/ffffff?text=Padding+Box');
            background-repeat: no-repeat;
            background-size: cover;
            background-clip: padding-box;
            border: 10px dashed rgba(0,0,0,0.3);
        }

        .bg-clip-content {
            background-image: url('https://via.placeholder.com/400x200/dc3545/ffffff?text=Content+Box');
            background-repeat: no-repeat;
            background-size: cover;
            background-clip: content-box;
            border: 10px dashed rgba(0,0,0,0.3);
            padding: 20px;
        }

        .bg-clip-text {
            background-image: linear-gradient(to right, #007bff, #dc3545);
            background-clip: text;
            color: transparent;
            font-size: 3rem;
            font-weight: bold;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 150px;
        }

        /* ---- background-origin ---- */
        .bg-origin-border {
            background-image: url('https://via.placeholder.com/100x100/28a745/ffffff?text=Border');
            background-repeat: no-repeat;
            background-origin: border-box;
            border: 20px solid rgba(0,0,0,0.1);
            padding: 20px;
            background-color: #f8f9fa;
        }

        .bg-origin-padding {
            background-image: url('https://via.placeholder.com/100x100/007bff/ffffff?text=Pad');
            background-repeat: no-repeat;
            background-origin: padding-box;
            border: 20px solid rgba(0,0,0,0.1);
            padding: 20px;
            background-color: #f8f9fa;
        }

        .bg-origin-content {
            background-image: url('https://via.placeholder.com/100x100/dc3545/ffffff?text=Content');
            background-repeat: no-repeat;
            background-origin: content-box;
            border: 20px solid rgba(0,0,0,0.1);
            padding: 20px;
            background-color: #f8f9fa;
        }

        /* ---- background-size ---- */
        .bg-size-cover {
            background-image: url('https://via.placeholder.com/800x200/007bff/ffffff?text=Cover');
            background-repeat: no-repeat;
            background-size: cover;
        }

        .bg-size-contain {
            background-image: url('https://via.placeholder.com/800x200/28a745/ffffff?text=Contain');
            background-repeat: no-repeat;
            background-size: contain;
        }

        .bg-size-50 {
            background-image: url('https://via.placeholder.com/800x200/dc3545/ffffff?text=50%');
            background-repeat: no-repeat;
            background-size: 50% 50%;
            background-position: center;
        }

        /* ---- Shorthand ---- */
        .bg-shorthand {
            background: 
                url('https://via.placeholder.com/400x200/6610f2/ffffff?text=Shorthand') 
                center center / cover 
                no-repeat 
                fixed 
                #f8f9fa;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            text-shadow: 0 0 10px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>

    <h1>Background Properties</h1>

    <!-- ====== 1. background-color ====== -->
    <section>
        <h2>1. background-color</h2>
        <div class="grid-2">
            <div class="demo-box bg-color-demo">background-color: #007bff</div>
            <div class="demo-box bg-color-rgba">background-color: rgba(255, 0, 0, 0.5)</div>
        </div>
        <div class="code-block">
            background-color: #007bff;
            background-color: rgba(255, 0, 0, 0.5);
        </div>
    </section>

    <!-- ====== 2. background-image (Gradients) ====== -->
    <section>
        <h2>2. background-image (Gradients)</h2>
        <div class="grid-2">
            <div class="demo-box bg-gradient-linear">Linear Gradient</div>
            <div class="demo-box bg-gradient-radial">Radial Gradient</div>
            <div class="demo-box bg-gradient-conic">Conic Gradient</div>
        </div>
        <div class="code-block">
            background-image: linear-gradient(to right, #007bff, #6c5ce7);
            background-image: radial-gradient(circle, #28a745, #1e7e34);
            background-image: conic-gradient(#ffc107, #dc3545, #007bff);
        </div>
    </section>

    <!-- ====== 3. background-image (Image) ====== -->
    <section>
        <h2>3. background-image (Image)</h2>
        <div class="demo-box bg-image-demo">Background Image</div>
        <div class="code-block">
            background-image: url('path/to/image.jpg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        </div>
    </section>

    <!-- ====== 4. background-repeat ====== -->
    <section>
        <h2>4. background-repeat</h2>
        <div class="grid-2">
            <div class="demo-box bg-repeat-repeat">repeat</div>
            <div class="demo-box bg-repeat-no-repeat">no-repeat</div>
            <div class="demo-box bg-repeat-repeat-x">repeat-x</div>
            <div class="demo-box bg-repeat-repeat-y">repeat-y</div>
        </div>
        <div class="code-block">
            background-repeat: repeat;
            background-repeat: no-repeat;
            background-repeat: repeat-x;
            background-repeat: repeat-y;
        </div>
    </section>

    <!-- ====== 5. background-position ====== -->
    <section>
        <h2>5. background-position</h2>
        <div class="grid-2">
            <div class="demo-box bg-position-center">center center</div>
            <div class="demo-box bg-position-top-left">top left</div>
            <div class="demo-box bg-position-bottom-right">bottom right</div>
        </div>
        <div class="code-block">
            background-position: center center;
            background-position: top left;
            background-position: bottom right;
        </div>
    </section>

    <!-- ====== 6. background-attachment ====== -->
    <section>
        <h2>6. background-attachment</h2>
        <div class="demo-box bg-attachment-fixed">Fixed Background (scroll the page!)</div>
        <div class="code-block">
            background-attachment: fixed;
        </div>
    </section>

    <!-- ====== 7. background-clip ====== -->
    <section>
        <h2>7. background-clip</h2>
        <div class="grid-2">
            <div class="demo-box bg-clip-border" style="color: #333;">border-box</div>
            <div class="demo-box bg-clip-padding" style="color: #333;">padding-box</div>
            <div class="demo-box bg-clip-content" style="color: #333; background-color: white;">content-box</div>
            <div class="demo-box bg-clip-text" style="background: none;">Gradient Text</div>
        </div>
        <div class="code-block">
            background-clip: border-box;  /* Default */
            background-clip: padding-box;
            background-clip: content-box;
            background-clip: text;        /* Experimental */
        </div>
    </section>

    <!-- ====== 8. background-origin ====== -->
    <section>
        <h2>8. background-origin</h2>
        <div class="grid-2">
            <div class="demo-box bg-origin-border" style="color: #333; min-height: 150px;">border-box</div>
            <div class="demo-box bg-origin-padding" style="color: #333; min-height: 150px;">padding-box</div>
            <div class="demo-box bg-origin-content" style="color: #333; min-height: 150px;">content-box</div>
        </div>
        <div class="code-block">
            background-origin: border-box;
            background-origin: padding-box;  /* Default */
            background-origin: content-box;
        </div>
    </section>

    <!-- ====== 9. background-size ====== -->
    <section>
        <h2>9. background-size</h2>
        <div class="grid-2">
            <div class="demo-box bg-size-cover">cover</div>
            <div class="demo-box bg-size-contain">contain</div>
            <div class="demo-box bg-size-50">50% 50%</div>
        </div>
        <div class="code-block">
            background-size: cover;    /* Fills container (may crop) */
            background-size: contain;  /* Fits image in container */
            background-size: 50% 50%;  /* Percentage of container */
        </div>
    </section>

    <!-- ====== 10. Shorthand ====== -->
    <section>
        <h2>10. Background Shorthand</h2>
        <div class="demo-box bg-shorthand">Shorthand</div>
        <div class="code-block">
            background: 
                url('image.jpg') 
                center center / cover 
                no-repeat 
                fixed 
                #f8f9fa;
        </div>
    </section>

    <!-- ====== REFERENCE TABLES ====== -->
    <section>
        <h2>11. Reference Tables</h2>

        <h3>Background Properties</h3>
        <table class="reference-table">
            <tr>
                <th>Property</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>background-color</code></td>
                <td>Sets the background color</td>
                <td><code>background-color: red;</code></td>
            </tr>
            <tr>
                <td><code>background-image</code></td>
                <td>Sets the background image or gradient</td>
                <td><code>background-image: url("image.jpg");</code></td>
            </tr>
            <tr>
                <td><code>background-repeat</code></td>
                <td>Controls image repetition</td>
                <td><code>background-repeat: no-repeat;</code></td>
            </tr>
            <tr>
                <td><code>background-position</code></td>
                <td>Sets the image position</td>
                <td><code>background-position: center top;</code></td>
            </tr>
            <tr>
                <td><code>background-attachment</code></td>
                <td>Controls scrolling behavior</td>
                <td><code>background-attachment: fixed;</code></td>
            </tr>
            <tr>
                <td><code>background-clip</code></td>
                <td>Defines the clipping area</td>
                <td><code>background-clip: padding-box;</code></td>
            </tr>
            <tr>
                <td><code>background-origin</code></td>
                <td>Sets the positioning origin</td>
                <td><code>background-origin: border-box;</code></td>
            </tr>
            <tr>
                <td><code>background-size</code></td>
                <td>Controls image scaling</td>
                <td><code>background-size: cover;</code></td>
            </tr>
        </table>

        <h3>background-repeat Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
            </tr>
            <tr><td><code>repeat</code></td><td>Repeats both horizontally and vertically (default)</td></tr>
            <tr><td><code>no-repeat</code></td><td>Does not repeat</td></tr>
            <tr><td><code>repeat-x</code></td><td>Repeats only horizontally</td></tr>
            <tr><td><code>repeat-y</code></td><td>Repeats only vertically</td></tr>
            <tr><td><code>space</code></td><td>Repeats with space between images</td></tr>
            <tr><td><code>round</code></td><td>Repeats and stretches to fit</td></tr>
        </table>

        <h3>background-size Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
            </tr>
            <tr><td><code>auto</code></td><td>Original size (default)</td></tr>
            <tr><td><code>cover</code></td><td>Fills the entire container (may crop)</td></tr>
            <tr><td><code>contain</code></td><td>Fits the entire image in the container</td></tr>
            <tr><td><code>x% y%</code></td><td>Percentage of the container</td></tr>
            <tr><td><code>xpx ypx</code></td><td>Pixel values</td></tr>
        </table>

        <h3>background-position Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
            </tr>
            <tr><td><code>left</code>, <code>center</code>, <code>right</code></td><td>Horizontal position</td></tr>
            <tr><td><code>top</code>, <code>center</code>, <code>bottom</code></td><td>Vertical position</td></tr>
            <tr><td><code>x% y%</code></td><td>Percentage values</td></tr>
            <tr><td><code>xpx ypx</code></td><td>Pixel values</td></tr>
        </table>
    </section>

</body>
</html>

Quick Reference

PropertyDescriptionCommon Values
background-colorSets background colorred, #FF0000, rgb(255,0,0)
background-imageSets background imageurl("image.jpg"), linear-gradient(...)
background-repeatControls repetitionrepeat, no-repeat, repeat-x, repeat-y
background-positionSets image positioncenter, top left, 50% 50%
background-attachmentControls scrollingscroll, fixed, local
background-clipDefines clipping areaborder-box, padding-box, content-box
background-originSets positioning originborder-box, padding-box, content-box
background-sizeControls scalingcover, contain, auto, 100%

Best Practices

✅ Do This:

/* Always set a fallback background-color when using images */
background-color: #f8f9fa;
background-image: url("image.jpg");

/* Use cover for hero sections */
.hero {
    background-image: url("hero.jpg");
    background-size: cover;
    background-position: center;
}

/* Use contain for logos */
.logo {
    background-image: url("logo.png");
    background-size: contain;
    background-repeat: no-repeat;
}

❌ Don’t Do This:

/* Don't use images without a fallback color */
background-image: url("image.jpg");
/* If the image fails to load, the background is transparent */

/* Don't use cover with important content that might be cropped */
.important-image {
    background-size: cover;
}
/* Use contain instead for important content */

Pro Tip: Always set a background-color fallback when using background-image. This ensures readability if the image fails to load. Use background-size: cover for hero/header sections and background-size: contain for logos and icons. The background shorthand is powerful but can be confusing — use it when you’re comfortable with the syntax!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!