FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/css3.jpg


@coder 532

BACKGROUND PROPERTY


2021-11-16 11:29 · 12 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.

Background Property

Set different background properties in one declaration:
 

<style>
body {
background: black url("image.svg") no-repeat fixed center;
}
</style>

SYNTAX
 

  • background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial | inherit;
<style>
body {
background: black url("image.svg") no-repeat fixed center;
}
</style>

<!--body-->
<body>
</body>

 

Background-Image Property

background-image property is used to specify a background image to be applied to all matched elements.

<style>
div{background-image:url('image.svg')}
</style>

 


Other Properties
 

  • background-color is used to apply the background color.
  • background-repeat is used to repeat background image
  • background-position is used to set the background image's position
  • background-size is used for background image's size
  • background-origin defines how the background is positioned (ignored when background attachment is fixed)
  • background-clip defines how the background is painted relative to the content-box, border-box, or the padding-box
  • background-attachment defines how the background image behaves, whether it scrolls along with its containing block or has a fixed position within the viewport
  • initial Sets the property to value to default
  • inherit Inherits property value from the parent element
<!DOCTYPE html>
<html>
<head>
<!--internal style sheet-->
<style>
div{color:rgb(255,255,255);
background-image:url('image.svg');
background-color:black;
height:400px;
border-radius:5px}
</style>
</head>

<!--Body-->
<body>
<div>

</div>
</body>
</html>

 

Background-repeat Property

When we use the background-image property then the background repeats on both the x-direction and the y-direction. The solution is CSS background-repeat property to stop repeating the background. By using this property we can remove background repeating in both directions.

<style>
div{background-image:url('image.svg');
background-repeat:no-repeat;}
</style>

SYNTAX
 

  • inherit | initial | no-repeat | repeat | repeat-x | repeat-y | round | space | unset
  • {background-repeat: repeat-x} allows image to repeat on x-direction.
<style>
body{
background-repeat:repeat-x;
}
</style>
  • {background-repeat: repeat-y} allows images to repeat in y-direction.
<style>body{background-repeat:repeat-y;}</style>
  • default value: {background-repeat: repeat}.
{background-repeat: no-repeat} is used to stop repeating the background.
<!DOCTYPE html>
<html>
<head>
<!--style sheet-->
<style>
div{
color:rgb(255,255,255);
background-image:url('image.svg');
background-color:black;
background-repeat:no-repeat;
background-size:200px;
height:380px;
border-radius:5px
}
</style>
</head>

<!--Body-->
<body>
<div>

</div>
</body>
</html>

 

Background-Position Property

background-position property is used to set the position of the background-images.
<style>
div{
background-image:url('image.svg');
background-position:top right;
}
</style>

SYNTAX
 

  • background-position: bottom | center | top | right | left | unset | initial | inherit


EXPLANATION
 

  • We are applying background-position property on an image.svg file.
  • {background-position: top right} property sets the background image to the top right corner.
<!DOCTYPE html>
<html>
<head>
<style>
div{color:rgb(255,255,255);
background-image:url('image.svg');
background-position:top right;
background-color:black;
background-repeat:no-repeat;
background-size:100px;
height:380px;
border-radius:5px}
</style>
</head>

<!--Body-->
<body>
<div>
</div>
</body>
</html>

 

Gradient

Gradients are added in CSS3. As an image, gradients are set with the background-image property or the background shorthand method.

TYPES
 

  • linear-gradient()
  • radial-gradient()

#linear-gradient() Syntax

background: linear-gradient (direction, color-1, color-2, ...);

#radial-gradient() Syntax

background: radial-gradient(red, blue);

MULTIPLE GRADIENTS
You can separate multiple linear-gradient properties with a comma.

<style>
body {
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
/*linear gradient*/
.class1{background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%);height:100px}

/*radial gradient*/
.class2{background: radial-gradient(white, gray, black);height:100px}

/*multiple linear gradients*/
.class3{background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
height:300px;}
</style>
</head>
<body>
<div class="class1"></div><br>
<div class="class2"></div><br>
<div class="class3"></div>
</body>
</html>

 

Background-Size

You can specify the size of a background image in px, %, and auto.

VALUES
 

  • auto | contain | cover | initial | inherit | unset

# when we set the width of the image the height becomes "auto"

<style>
.class1{background-size:200px;}
</style>

 

# we can also set both width and height values.

<style>
.class2{background-size:200px 300px;}
</style>


# Default value: auto

<style>
.class3{background-size:auto;}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
div{color:rgb(255,255,255);
background-image:url('image.svg');
background-color:black;
background-repeat:no-repeat;
height:380px;
border-radius:5px}
.class1{background-size:200px;}
.class2{background-size:auto;}
</style>
</head>
<!--Body-->
<body>
<div class="class1"></div>
<div class="class2"></div>
</body>
</html>

 

Background Shorthand

We can use multiple background properties in one declaration

SYNTAX

<style>
body{background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;}
</style>
  • background-color is used to apply the background color.
  • bg-image: image file.
  • background-repeat is used to repeat background image
  • background-position is used to set the background image's position
  • background-size is used for background image's size
  • background-origin defines how the background is positioned (ignored when background attachment is fixed)
  • background-clip defines how the background is painted relative to the content-box, border-box, or the padding-box
  • background-attachment defines how the background image behaves, whether it scrolls along with its containing block or has a fixed position within the viewport
  • initial Sets the property to value to default
  • inherit Inherits property value from the parent element
<!DOCTYPE html>
<html>
<head>
<style>
div{
color:rgb(255,255,255);
background:black
url('image.svg')
center
no-repeat
fixed;
height:400px;
border-radius:5px
}
</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