April 5th, 2019 
Nilesh Chaurasia CSS Background Image Property
Background Image is a property to set an image to the background of an HTML Elements.
And background-image property is used to define the background image.
Example 1 – Background Image Example with the body HTML element
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("smartphones backgroung image.jpg");
}
</style>
</head>
<body>
</body>
</html>
In the above code, we define the background-image to an Elements.
Here, we define background-image to the body.
CSS Background Repeat Property
CSS Background Repeat property is used where your image size is small so we can tile the image.
Example 2 – Background Repeat Property Application in case of small size images
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("smartphones backgroung image.jpg");
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
In the above code, we define the background-image to an HTML Elements. But the size of the image is very small then it will appealing as given below.
If the size of the image is small and that image will not repeat then you have to apply background-repeat: no-repeat;
Example 3 – Background Repeat Property Use with no-repeat option and its effect.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("ball.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
In the above code, we define the background-image and background-repeat to an HTML Elements. And the size of the image is small then that image repeat but we set no repeat than it will be shown once.
On the given code we apply repeat only on y-axis or vertical.
Example 4 – Background Repeat with repeat-y option
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("ball.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
In the above code, we define the background-image and background-repeat on Y-Axis to an HTML Elements. And the size of the image is small then that image repeat only on vertical not show on horizontal.
Caution:Similarly, you can apply background-repeat on x-axis then the image will repeat on the x-axis or horizontal.
CSS Background Position Property
If you want to positioning of the background image than you can use background-position property. Or in other words, to change the position of the background image, then you have to apply background-position : center; . Default position of background image is top-left cornor.
Example 5 – Background Position Property Application to make a image center to the container
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image: url("background flower.jpg");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
In the above code, we define the background-image, background-repeat and background-position to an HTML Elements background-image. And we set the position of the background-image is at centre.
Note:You can change the position of the background-image as your requirement (left, right, bottom, top and center).
CSS Background Attachment Property
If you want to attached image with fixed behavior to a element than you can use background-attachment property. Or in other words, to change to the fixed background image, then you have to apply background-attachment : fixed;
The fixed background image will be fixed, it means it will not scroll as you scroll the web page. The default value of this property is scroll.
Posted in 
Tags: 
Hi there I am so glad I found your webpage, I really found you by mistake, while I was researching on Digg for something else, Anyhow I am here now and would just like to say thanks a lot for a incredible post and a all round exciting blog (I also love the theme/design), I don’t have time to go through it all at the minute but I have book-marked it and also added your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the awesome work.