Mastering CSS background with example

Hello, developer! Welcome to our article. Here, you'll discover how to set backgrounds on your website with simple examples. Also, you'll learn to create visually captivating backgrounds for your website, ranging from basic colors to gradients, images, and patterns.

First, let's see the background color.

The background-color property is used to specify the background color of an element that covers its entire area.

body {
    background-color: steelblue;
}

h1 {
    background-color: thistle;
}

You can customize the transparency of the background color using the opacity property. We can give this property a value from 0 to 1. By giving a value of 0, any element becomes transparent, and by giving a value of 1, it becomes opaque. You can create semi-transparent backgrounds by giving them a value of 0.5, so users can still see the content behind them.

h1 {
    background-color: thistle;
    opacity: 0.9;
}

Opacity value example (0.0 to 1.0).

This opacity property specifies the opacity and opacity of the body's background, with or without an element. Its value ranges from 0.0 to 1.0. The higher the value, the less transparent it is. You can also specify a percentage value.

Background-attachment property

When you set background-attachment: fixed, the background image remains fixed in its position relative to the viewport, meaning it doesn't move when the page is scrolled. This creates a parallax effect, where the background appears stationary while the content scrolls over it. It's commonly used for creating visually appealing designs or emphasizing certain elements on the page.

The background-attachment property has the following values: fixed, scroll, local, unset, initial, and inherit.

<head>
    <style>
        div {
            background-image: url(./img/A.I\ 3.png);
            background-attachment: fixed;
            height: 80vh;
            width: 100%;
        }
    </style>
</head>

<body>
    <div>
        <h1>Learn Web Development With Code Mafias.</h1>
    </div>
    <h1>background-attachment</h1>
    <p>The background-attachment fixed value</p>
    <p>The background-attachment fixed value</p>
    <p>The background-attachment fixed value</p>
    <p>The background-attachment fixed value</p>
    <p>The background-attachment fixed value</p>
    <p>The background-attachment fixed value</p>
    <p>The background-attachment fixed value</p>
    <p>The background-attachment fixed value</p>
    <p>The background-attachment fixed value</p>
    <p>The background-attachment fixed value</p>
    <p>The background-attachment fixed value</p>
    <p>The background-attachment fixed value</p>
</body>

When you scroll through your web page with the fixed value, the image will stay the same. All other content will scroll.

Scroll: This is the default value, where the background image scrolls along with the content.

Local, Unset and Initial: These values also allow the background image to scroll with the content.

Inherit: This value inherits the behavior from its parent element, allowing you to customize it accordingly.

Background-blend-mode Property

With the background-blend-mode property, we can blend two background images on the webpage. Developers use it for many effects, such as giving dark mode or light mode themes, applying glowing effects, and much more.

Light Mode example

<head>
    <style>
        #lightmode {
            background-image: url(./img/bg\ img.jpg), url(./img/tree.png);
            background-repeat: no-repeat;
            background-blend-mode: lighten;
            height: 35vh;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id="lightmode"></div>
</body>

Exclusion Mode Example

<head>
    <style>
        #exclusionMode {
            background-image: url(./img/bg\ img.jpg), url(./img/tree.png);
            background-repeat: no-repeat;
            background-blend-mode: exclusion;
            height: 35vh;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id="exclusionMode"></div>
</body>

The background-blend-mode property has many values, like normal, color, darken, hue, multiply, overlay, and more, which we can apply to any image. The default value of this property is normal.

Background-clip Property

The background-clip property accepts values such as margin, padding, content, and text. When applied to an element with a background image or text, these values determine the visibility of the background relative to the element's box model (margin, padding, content area, or text).

Background-color Property

The background-color property is utilized to alter the background color of a webpage. By default, its value is transparent.

<style>
    body {
        background-color: RGB(155, 208, 146);
    }

    p {
        background-color: HSL(186, 91%, 42%);
    }

    .container {
        background-color: RGBA(158, 248, 228, 0.3);
    }

    #peraOne {
        background-color: thistle;
    }
</style>

Background-image property

The background-image property is employed to specify one or more background images for an element or its body. Additionally, you can set the image by copying its address from the browser and pasting it into the property value.

<style>
    body {
        background-image: url(./img/bg\ img.jpg), url(./img/tree.png),
            url(./img/A.I\ 3.png);
        height: 100vh;
        background-repeat: no-repeat;
    }
</style>

By default, the background image is placed in the top-left corner of an element. You can also customize it based on your height and width.

If you don't have or like the image, set the background color to always use; it will make your website look more attractive.

The background-image property offers versatile color values. You can specify one, two, or more colors to create various visual effects.

Here's the syntax for setting an image using this property:

url('image-url');

You can use this value to set a background image. To add multiple images, separate them with commas within the url() function.

<style>
    body {
        /*  Import image in the browser via link */
        background-image: url("https://codemafias.com/img/post_imgs/1666711637042.png");
        background-repeat: no-repeat;
        background-size: cover
    }
</style>

<style>
    /*  Save image in computer */
    body {
        background-image: url('./img/A.I\ 3.png');
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>

Conic-gradient()

To create a conic gradient background image, you must specify at least two colors to define the gradient. The (from) parameter determines the starting point of the gradient, with values like (0.5turn) indicating the position halfway through a full rotation. Additionally, you can adjust the position of the gradient using the (at) parameter, which specifies the position relative to the width and height of the element. For example, (at 40% 60%) would position the gradient at 40% of the width and 60% of the height.

<style>
    body {
        background: conic-gradient(from 0.2turn at 10% 50%, thistle 6deg, orange 50deg 80deg,
                teal 108deg 50deg, rosybrown 90deg 110deg,
                steelblue 220deg 300deg, crimson 300deg);
        height: 100vh;
        width: 50%;
    }
</style>

Linear-gradient()

To add a linear gradient to the background of a page, you need to specify at least two colors. By default, the gradient goes from top to bottom, but you can customize its direction by specifying keywords like "up," "right," "left," or "down." If you want to apply multiple linear gradients simultaneously, separate them with a comma.

<style>
    body {
        background: linear-gradient(to right, rosybrown 10%, thistle 50%, teal 90%),
            linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%);
        height: 100vh;
        width: 50%;
    }
</style>

Linear-gradient with image

With the help of a linear gradient, we can apply a color flower shadow to any image. Many developers use it when there is a need to overlay text on an image that is not clearly visible. To ensure that the user does not face any difficulty in reading any text, a linear gradient can be added.

In the example provided, a linear gradient is used to highlight the distinction on half of the page.

<head>
    <style>
        body {
            background-image: linear-gradient(rgba(98, 98, 98, 0.601),
                    rgba(62, 63, 62, 0.601)), url(./img/focus.jpg);
            background-size: cover;
            height: 50vh;
            background-repeat: no-repeat;
        }

        .first {
            color: white;
            font-family: sans-serif;
        }
    </style>
</head>

<body>
    <div class="first">
        <h1>linear-gradient with image</h1>
    </div>
</body>

Radial-gradient()

Radial-gradient() requires a minimum of two colors and can create circular or elliptical gradients. You can adjust the shape by using keywords such as closest-side, closest-corner, ellipse at top, circle at%, farthest-side, and farthest-corner.

<head>
    <style>
        body {
            background: radial-gradient(circle at 90%, rosybrown, teal 50%, thistle 75%, aqua 75%);
            height: 100vh;
            width: 50%;
        }
    </style>
    <!-- Second example  -->
    <style>
        body {
            background: radial-gradient(ellipse at right, teal, transparent),
                radial-gradient(ellipse at left, black, transparent);
            height: 100vh;
            width: 50%;
        }
    </style>
</head>

Repeating-conic-gradient()

This is the conic-gradient only repeated in it.

<style>
    body {
        background: repeating-conic-gradient(teal 20%, rosybrown 15%, thistle 30%);
        height: 100vh;
        width: 100%;
    }
</style>

Repeating-linear-gradient()

This is the linear gradient only repeating in it.

<style>
    body {
        background: repeating-linear-gradient(90deg, teal, rosybrown 15%, thistle 20%);
        height: 100vh;
        width: 100%;
    }
</style>

Repeating-radial-gradient()

Only the radial gradient is repeated in it.

<style>
    body {
        background: repeating-radial-gradient(teal, thistle 10px, rosybrown 10px, black 20px);
        height: 100vh;
        width: 100%;
    }
</style>

Background-origin Property

The background-origin CSS property determines the origin of the background image. It specifies whether the background image should start from the padding area, the border area, or the content area of the element. By default, it uses the padding box.

Note that if you've set the background-attachment to "fixed," this property won't have any effect.

Best Example: background-origin-property.

<head>
    <style>
        .container {
            margin-left: 50px;
        }

        .bg-origin,
        .bg-origin-1,
        .bg-origin-2 {
            margin: 10px 0;
            color: #fff;
            background-image: url(./img/bg\ img.jpg);
            border: 10px double black;
            padding: 20px;
            width: 400px;
            background-origin: border-box;
            background-repeat: no-repeat;
        }

        .bg-origin-1 {
            background-origin: content-box;
        }

        .bg-origin-2 {
            background-origin: padding-box;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="bg-origin">border-box</div>
        <div class="bg-origin-2">padding-box</div>
        <div class="bg-origin-1">content-box</div>
    </div>
</body>

Background-original-property of values given below.

border-box: The background is positioned relative to the border box, taking up space within the border.

padding-box: The background is positioned relative to the padding box, taking up space within the padding.

content-box: The background is positioned relative to the content box, taking up space within the content itself.

Background-position property

The background-position property sets the initial position of a background image. You can adjust the position using keywords like left, right, top, bottom, or center, allowing you to move the image within its container.

<head>
    <!-- value in keyword  -->
    <style>
        body {
            background-image: url(./img/Logo.png);
            background-size: 200px 200px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-color: rgb(208, 208, 208);
            background-position: center center;
        }
    </style>
</head>

<head>
    <!-- value in keyword  -->
    <style>
        body {
            background-image: url(./img/Logo.png);
            background-size: 200px 200px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-color: rgb(208, 208, 208);
            background-position: bottom right;
        }
    </style>
</head>

When specifying values in percentages, pixels, inches, or millimeters for background-position, the first value represents the horizontal position, and the second value represents the vertical position. By default, the position is set to 0% 0%, which is the top-left corner. If only one value is provided, the second value defaults to 50%, centering the background vertically. For example, 0% 100% corresponds to the bottom-left corner.

<head>
    <!-- <-- value in percentage  -->
    <style>
        body {
            background-image: url(./img/Logo.png), url(./img/Logo.png);
            background-size: 200px 200px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-color: rgb(208, 208, 208);
            background-position: 0% 50%, 50% 50%;
        }
    </style>
</head>

<head>
    <!-- value in inch -->
    <style>
        body {
            background-image: url(./img/Logo.png);
            background-size: 200px 200px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-color: rgb(208, 208, 208);
            background-position: 5in 3in;
        }
    </style>
</head>

CSS Background-position property

You can set four or more images at once.

<head>
    <style>
        body {
            background-image: url(./img/tree.jpg), url(./img/tree.jpg),
                url(./img/tree.jpg), url(./img/tree.jpg);
            background-size: 25%;
            background-repeat: no-repeat;
            background-color: rgb(208, 208, 208);
            background-position: 0% 0%, 33.33% 0%, 66.66% 0%, 100% 0;
        }
    </style>
</head>

Set the percentage based on the number of images you want to keep; for example, if you want to keep two images, set the background-position: 0% 0%, 100% 0, and also set the size to 50%. (background-size: 50%;) set up in this manner.

Background-repeat Property

The background-repeat property controls how a background image is tiled or repeated. By default, the image repeats both horizontally and vertically. If you prefer not to repeat the image, you can specify no-repeat.

<head>
    <style>
        body {
            background-color: rgb(214, 214, 214);
            background-image: url(./img/Logo.png);
            background-repeat: no-repeat;
            background-size: 100px 100px;
        }
    </style>
</head>

<head>
    <style>
        body {
            background-color: rgb(214, 214, 214);
            background-image: url(./img/Logo.png);
            background-repeat: repeat-y;
            background-size: 100px 100px;
        }
    </style>
</head>

These are the different values for the background-repeat property:

repeat-x: The background image repeats horizontally.

repeat-y: The background image repeats vertically.

repeat: The background image repeats both horizontally and vertically. If it doesn't fit, it's cropped.

no-repeat: The background image appears only once, without repeating.

round: The background image repeats to cover the area, but it's scaled to fit without cropping.

space: Similar to round, but it adds space between the repeated images.

Single Value	Two Value Equivalent
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
space	space space
round	round round
no-repeat	no-repeat no-repeat

In two-value syntax, the first value repeats horizontally and the second value repeats vertically.

Background-size Property

The background-size property controls the size of the background image. It can be adjusted using various syntaxes:

auto: The default value, displaying the image at its original size.

length: Sets the width and height of the image using pixel values (e.g., 10px 10px). If only one value is provided, the other is set to auto.

percentage: Specifies the size as a percentage of the parent element's dimensions.

cover: Scales the image to cover the entire container, cropping if necessary.

contain: Ensures the entire image is visible within the container, scaling it as needed.

<style>
    body {
        background-image: url(./img/focus.jpg);
        background-size: cover;
    }
</style>

<style>
    body {
        background-image: url(./img/focus.jpg);
        background-size: 50% 500px;
        background-repeat: no-repeat;
    }
</style>

<style>
    body {
        background-color: antiquewhite;
        background-image: url(./img/focus.jpg);
        background-size: contain;
        height: 200px;
        background-repeat: no-repeat;
    }
</style>

CSS Background-size Property

You can change the size of the image. That image will appear first on your page based on its size. After that, you can change the image's background size.

Conclusion

Understanding CSS background properties can make your website look better. You can control things like position, repetition, and size to create cool looks. You don't need to memorize all these properties, just keep practicing, and you will remember everything.

I hope you completely understand this topic. If you have any questions, you can ask them in the question box given below.

Next: Mastering CSS border Property with example...