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 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 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 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:-