CSS background-image Property
Manual Book CSS background-image Property
Set a background-image for theelement:
body {
background-color: yellow; //used black or cccccc
Set two background images for theelement:
body {
background-image: url("background1.gif"), url("bacground2.gif");
background-color: dddddd; //used black or cccccc
Sets two background images for theelement. Let the first image appear only once (with no-repeat), and let the second image be repeated:
body {
background-repeat: repeat, no-repeat;
background-image: url("img1.gif"), url("img2.gif");
background-color: 333333;
Use different background properties to create a "hero" image:
.hero-image {
background-image: url("image1.jpg"); /* The image used */
background-color: 444444;
height: 600px; /* You must set a specified height */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
background-position: center; /* Center,left ,right the image */
}
Sets a linear-gradient (two colors) as a background image for a
#grad1 {
height: 300px;
background-color: 444444;
Sets a linear-gradient (three colors) as a background image for a
#grad1 {
height: 100px;
background-color: 33333333;
The repeating-linear-gradient() function is used to repeat linear gradients:
#grad1 {
height: 100px;
background-color: dddddd;
background-image: repeating-linear-gradient(blue, yellow 20%, green 10%);
}
Sets a radial-gradient (two colors) as a background image for a
#grad1 {
height: 300px;
background-color: 333333;
Sets a radial-gradient (three colors) as a background image for a
#gradient1 {
height: 300px;
background-color: 333333;
The repeating-radial-gradient() function is used to repeat radial gradients:
#grad1 {
height: 150px;
background-color: 333333;
Editor :SCode
Source : https://www.w3schools.com/
