CSS3 BACKGROUND PROPERTIES
2021-11-16 11:37 · 8 min read
What is a background?
We can set colors, gradients, and many images as the background on a web page. We can change the properties of the background as per our choice. Here we will learn to use different background properties i.e. background-image, Background-gradients, Background-size, etc.
Multiple Background Images
- We can use multiple background images on a single element. The different background images are separated by commas.
<style>
body{
background-image: url('image.svg'),
url('https://www.tdbschool.com/img/tdb-logo.jpg');
}
</style>- Multiple background images can be used using either the individual background properties or the background shorthand properties.
<style>
body{
background-image: url('image.svg') right bottom no-repeat,
url('https://www.tdbschool.com/img/tdb-logo.jpg right bottom no-repeat,');
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
div{background-color:black;
background-size:200px;
background-image: url('image.svg'), url('https://www.tdbschool.com/img/tdb-logo.jpg');
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height:380px;}
</style>
</head>
<!--Body-->
<body>
<div></div>
</body>
</html>
Background attachment
Background attachment defines the behavior of the background image when scrolling the page. This property sets whether a background image is fixed or it is scrolling with the rest of the page.
SYNTAX
{background-attachment: scroll | fixed | inherit | local | initial;}
Default Value:
{background-attachment: scroll}
<style>
div{background-image: url("image.svg");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
Property: value
- scroll This is the default value. The background image scrolls with the web page
- fixed The background image will not scroll with the page
- inherit Inherits this property from its parent element.
- initial Sets this property to its default value.
- local The background image will scroll with the element's contents
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-image: url("image.svg");
background-repeat: no-repeat;
background-attachment: fixed;
height:400px;
Background-color:black;
}
</style>
</head>
<!--Body-->
<body>
<div></div>
</body>
</html>
Background Clipping
The background-clip property defines how far the background (color or image) should extend within an element.
<style>
div{
border: 10px dotted black;
padding: 15px;
background: lightblue;
background-clip: padding-box;
}
</style>
CSS Syntax
background-clip: border-box | padding-box | content-box | initial | inherit;
border-box: it is the value.
padding-box: The background extends to the inside edge of the border.
content-box: The background extends to the edge of the content box.
initial: it is used to sets the property to its default value.
inherit: this value is used to inherit this property from its parent element.
<!DOCTYPE html>
<html>
<head>
<style>
div{border: 10px dotted black;
padding: 15px;
background: green;
background-clip: padding-box;
background-size:200px;
height:380px;
border-radius:5px}
</style>
</head>
<!--Body-->
<body>
<div></div>
</body>
</html>
Background Blending
Lighten background-image blending mode
<style>
body{
background-image: url("img1.jpg"), url("img2.jpg");
background-repeat: no-repeat, repeat;
background-blend-mode: lighten;
}
</style>
CSS Syntax
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;
Note: Edge/Internet Explorer does not support the background-blend-mode property.
<!DOCTYPE html>
<html>
<head>
<style>
body{color:rgb(255,255,255);
background-image: url("https://www.tdbschool.com/img/tdb-logo.jpg"), url("image.svg");
background-repeat: repeat, repeat;
background-blend-mode: lighten;
background-size:200px;
height:380px;
border-radius:5px}
</style>
</head>
<!--Body-->
<body>
<div></div>
</body>
</html>
Background-Opacity
The CSS background opacity property is used the opacity/transparency of the backgrounds.
TRANSPARENT BACKGROUND-IMAGE
Opacity property value range 0.0 - 1.0. The lower value is more transparent.
<style>
div{
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
opacity: 0.5;
}
</style>
TRANSPARENT CONTAINER
you can also apply the opacity property on containers.
<style>
div{background-color:back;
opacity: 0.5;
height:200px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<!--internal style-->
<style>
div{background-image:url('image.svg');
background-color:black;
background-repeat:no-repeat;
background-size:200px;
height:380px;
opacity:0.5;
}
</style>
</head>
<!--body-->
<body>
<div>
</div>
</body>
</html>