CSS BACKGROUND IMAGE PROPERTY TUTORIAL


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.
 

background image css

 
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%;



Kalpesh Patel

Founder & Owner at Aarav Web Solutions . Working for business development related to Web Design & Development. Also working with client in India & for outsourcing projects. Visit our website Aarav Web Solutions to see more about completed projects for clients. Focus in product development and we have developed our two own product listed below: Classified Website In India and Deals & Offer Website In India