The background-image property sets one or more background images for an element. The background image property of any element is used to cover the full background of your desired image. I know this is not a big tutorial for the experience developer but this tutorial will help to student and new web designer who are learning.
Property to display the image as background of any element is background-image. The syntax to display the background image of any html element but here i am writing for the div element is given below.
div
{
background-image: url(“images/yourimage.jpg”);
}
The background-image property placed the image by default at the top left corner of the element. Here i am writing the tutorial about how we can use the CSS background image property to display the image as background. It count the padding and border during rendering of the background image but not count the margin.
It is useful to use the background color when assigning the image as background, because it will display the color instead of blank space if background image not present or it missed during the download.
div
{
background-image: url(“images/yourimage.jpg”);
}
Above example is not complete till, It also required the other property height and width of the div other wise it will be not displayed. Check the syntax below.
div
{
background-image: url(“images/yourimage.jpg”);
background-color: #fff600; width:600px;height:400px;
}
Also there are many property which can be used to repeat the image background horizontally and vertically or both, background position to display the image from the top , left, center or right. Find the syntax of that below.
background-repeat: no-repeat;
background-position: center;
we can set the background position by using the percent or pixel.
background-position: 1000px 150px;
or
background-position: 20% 20%;
