/* using background proprty */
body {
background: url('https://placeimg.com/640/480/arch'); /*this will add image to background */
}
/* using background */
body {
background-image: url('https://placeimg.com/640/480/arch'); /*this will add image to background */
}
In the code snippet, we have added a background image to the body HTML element using the background and background-image property of CSS.
To disable repetition of the image to the element you can use the background-repeat property as below
.element {
background-image: url('https://placeimg.com/640/480/arch');
background-repeat: no-repeat;
}
To cover the full part of the HTML element you can use the background-size property of CSS.
.element {
background-image: url('https://placeimg.com/640/480/arch');
background-repeat: no-repeat;
background-size: cover;
}
You can assign values to the background-size property to make an image plot in a specific size.
/* PERCENTAGE - width 100%, height 100% */
.element {
background-image: url('https://placeimg.com/640/480/arch');
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* PX - width 500px, height 300px */
.element {
background-image: url('https://placeimg.com/640/480/arch');
background-repeat: no-repeat;
background-size: 500px 300px;
}
0 Comments