@coder 495
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:
POPULAR POSTS
what is new in miui 11?...
best free web hosting services...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
CSS3 RESPONSIVE UI...
Tables HTML...
How to host a web page in 10 minutes....
How to use CSS3 Overflow Property?...
CSS3 FUNCTIONS...
CSS3 FILTERS...
CSS3 SHAPES...
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
