Software

CSS Background Properties

By Hassan Javed

Posted on October 3, 2022

Summary:

In this tutorial we are going to cover the list of following CSS background properties and will see their working as well:

Background-color
Background-image
Background-repeat
Background-size
Background-origin
Background-clip
Background-position

Let’s start the topic with an introduction first.

Introduction:

CSS(Cascading Styling Sheet) it’s a styling language understandable by browsers used for styling web applications. By using CSS with HTML we can create and design web pages and make them more attractive and eye-catching. CSS provides us a bunch of useful properties to design an HTML element such as images, text, links, headings, divs, etc.

Furthermore, the CSS property includes a few background properties as well that can be used to design background in a pro way and by these all properties you can also make invisible character. Check out the following amazing CSS tricks to design a Background efficiently.

CSS Background –Color Property:

Let’s suppose you created a header by using HTML div or container element and you want to add some color in the background of that element so you can simply apply the background color property as we applied in the following example below:

Example no:1)

<!DOCTYPE html>

<html>

<head>

.container{

background-color: black;

width: 50%;

height: 100px;

}

</style>

</head>

<body>

</center>

</body>

</html>

In the above code, we just created a simple container using HTML div element and then we applied internal CSS you can add inline or external CSS as you want.

We used the background-color property to apply the black color in the background.

Check the output below:

OUTPUT:

CSS Background –Image Property:

This background property allows us to add an image to the HTML document. See the following example:

Example no:2)

<!DOCTYPE html>

<html>

<head>

#bg{

width: 45%;

height: 50vh;

}

</style>

</head>

<body>

</div>

</body>

</html>

OUTPUT:

It happens in some cases that a background image is displayed as repeated like this:

if you don’t want to show a repeated background image like the above then our next CSS property is just for you.

CSS Background –repeat Property:

This property is used to stop an image to repeat itself, try the following example:

Example no:3)

<!DOCTYPE html>

<html>

<head>

#bg{

background-repeat: no-repeat;

width: 45%;

height: 50vh;

}

</style>

</head>

<body>

</div>

</body>

</html>

OUTPUT:

As you can see now it is displaying a single image, Let’s move forward to our next Background property

CSS Background –size Property:

This property enables us to adjust the size of a background image. we can adjust the size in three ways

By using Cover/contain
by declaring height and width
by using auto

Check out the examples below:

Example no:4)

<!DOCTYPE html>

<html>

<head>

#bg{

background-repeat: no-repeat;

background-size: cover;

height: 100vh;

}

</style>

</head>

<body>

</div>

</body>

</html>

OUTPUT:

The background-size: cover property will cover the whole web page.

While the background-size: contain will cover the half page, like below.

You can adjust the size according to your desire by declaring the height and width like this:

background-repeat: no-repeat;

background-size: 250px 250px;

height: 100vh;

}

Above code will give output like below:

By applying background-size : auto property the image will be displayed in its original size like below:

CSS Background-origin Property:

This property sets the origin of an image, we can pass 4 values in it

border-box
padding box
content-box
Inherit

see the code snippet below:

Example no:5)

<!DOCTYPE html>

<html>

<head>

#bg{

background-repeat: no-repeat;

/*change value to see the difference*/

background-origin: border-box;

height: 100vh;

}

</style>

</head>

<body>

</div>

</body>

</html>

OUTPUT:

CSS background- clip property:

This property cut-outs the extra part of the image to adjust it in a container box, it works like a background-origin property, see the following code snippet:

Example no:6)

<!DOCTYPE html>

<html>

<head>

#bg{

background-repeat: no-repeat;

background-clip: border-box;

height: 100vh;

}

</style>

</head>

<body>

</div>

</body>

</html>

OUTPUT:

See the next property explained below:

CSS background-Position Property:

This property is used to set the position of a background

Example no:7)

<!DOCTYPE html>

<html>

<head>

#bg{

background-repeat: no-repeat;

background-position: center;

height: 80vh;

}

</style>

</head>

<body>

</div>

</body>

</html>

Note: you can provide any particular position such as left, right, top, or bottom.

OUTPUT:

Note: we used images to apply CSS background properties you can use any HTML element these properties are not only applicable to background images.

You can Also see Css Transparent Background Color

Conclusion:

In this tutorial, we talked about the Background Properties of CSS. We saw an introduction and then we described all the background properties with examples.

We learned how to change the color, position, size, and origin, of a background of an element by using these beneficial background properties of CSS.

That’s all for today hope you like the tutorial if you have any queries regarding this tutorial so feel free to contact us below

Thanks for reading.