FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 463

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>
TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer