In this tutorial I am going to give an overview on: Background-image, a css property that sets one or more background images for an element like div, paragraph etc., which by default gets placed at the top-left corner of that element, and can be repeated vertically and horizontally or both by using Background-repeat property.

 Through this tutorial you will know different variations in order to place your background image.  You can set one or more images in the background as:

background-image: url("image1.jpg"), url("image2.jpg");


Syntax For Background-image:

background-image: url|none|initial|inherit;

Where:


url:   Url of the image. To set more than one image, place the urls separated by a comma

none:  This is default property with no background image

initial: Sets the property to default value

inherit: The property is inherited from its parent element


Syntax For Background-repeat:

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Where:

repeat :The background image will be repeated both vertically and horizontally. This is default

repeat-x: The background image will be repeated only horizontally

repeat-y: The background image will be repeated only vertically

no-repeat: The background-image will not be repeated

initial: Sets the property to default value

inherit: The property is inherited from its parent element. 

Background-Image With Default Property

This demo will help you to set a background image in an element. Here you will see that image spreads all over the element’s body. It is because of it’s default property i.e. background-repeat : repeat

CSS Code:

.main{
background-image:url(../images/park.jpg);
width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Background Image CSS Example</title>
<!-- Include CSS file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="main">
<p>This is a example of background-image with default property.</p>
</div>
</body>
</html>


Background-Image With No-Repeat Property

In the above demo you have seen that the image gets spread all over the element’s container, so to fix it at a certain position you may use repeat property  i.e. background-repeat

css-background-image-no-repeat

CSS Code:

.main{
background-image:url(../images/park.jpg);
background-repeat: no-repeat;
width:500px;
height:500px;
}

HTML Code:

<!DOCTYPE html>
<html>
<head>
<!-- Include CSS file here -->
<link href="CSS/style.css" rel="stylesheet">
</head>
<body>
<div class="main">
<p>This is a example of background-image no-repeat.</p>
</div>
</body>
</html>

Background-Image With Repeat-X Property

css-background-image-repeat-x

CSS Code:

.main{
background-image:url(../images/park.jpg);
background-repeat: repeat-x;
width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}

HTML Code:

<!DOCTYPE html>
<html>
<head>
<!-- Include CSS file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="main">
<p>This is a example of background-image with repeat in x-axis.</p>
</div>
</body>
</html>


Background-Image With Repeat-Y Property

css-background-image-repeat-y

CSS Code:

.main{
background-image:url(../images/park.jpg);
background-repeat: repeat-y;
width:100%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}

HTML Code :

<!DOCTYPE html>
<html>
<head>
<!-- Include CSS file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="main">
<p>This is a example of background-image with repeat in y-axis.</p>
</div>
</body>
</html>

Conclusion:

In the above tutorial, we have learnt to set a background image in an element using CSS. You have also seen to fix the image using repeat property. Hope you might have benefited with this post. Give us your feedback so that we can able to know about your reviews.

Also read our popular post:-