Back to: HTML Tutorials
Background Images in HTML with Examples
In this article, I am going to discuss Background Images in HTML with Examples. Please read our previous article where we discussed Images in HTML with Examples. At the end of this article, you will learn everything about Background Images in HTML with Examples.
HTML Background Images
Almost every HTML element can have a background picture. To set the background of your HTML page, you can pass the path to an image as the value of the background attribute.
Background Image on a HTML element
We will use the HTML style tag inside the head and the CSS background-image property to add a background image to an HTML element.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="robot.png">
<title>Images</title>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
}
.div_background {
background-image: url(https://cdn.pixabay.com/photo/2015/10/30/20/13/boat-1014711_960_720.jpg);
width: 500px;
height: 340px;
color:white;
font-weight: 500;
font-size: 28px;
padding: 15px;
}
</style>
</head>
<body>
<div class="div_background">
This div has background
</div>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
HTML Background Image on a Page
You must specify the background image on the <body> element if you want to add a background image on the entire page.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="robot.png">
<title>Images</title>
<style>
body {
height: 100vh;
background-image: url("https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_960_720.jpg");
color:white;
padding: 25px;
background-position: center;
background-size: cover;
background-position: fixed;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h3>This web page has Background</h3>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Background Repeat Image in HTML
If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element. If we don’t want the image to repeat itself, we can change the background-repeat property to no-repeat.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="robot.png">
<title>Images</title>
<style>
body{
display: grid;
place-items: center;
height: 100vh;
}
div {
border: 1px solid red;
width: 800px;
height: 500px;
background-image: url("https://cdn.pixabay.com/photo/2019/05/26/22/43/puppies-4231472_960_720.jpg");
}
</style>
</head>
<body>
<div>
<h3>This web page has Background</h3>
</div>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
As you can see in the example above the image is repeated to fill the element background.
Background No Repeat Image in HTML
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="robot.png">
<title>Images</title>
<style>
body{
display: grid;
place-items: center;
height: 100vh;
}
div {
border: 1px solid red;
width: 800px;
height: 500px;
background-image: url("https://cdn.pixabay.com/photo/2019/05/26/22/43/puppies-4231472_960_720.jpg");
background-repeat:no-repeat ;
}
</style>
</head>
<body>
<div>
<h3>This web page has Background</h3>
</div>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
When we set the background-repeat value to no-repeat the image will not try to fill the empty area by repeating itself.
Background Cover Image in HTML
Set the background-size attribute to cover if you want the background image to cover the entire element. The image will stretch both horizontally and vertically to cover the entire screen.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="robot.png">
<title>Images</title>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
}
div {
width: 800px;
height: 500px;
background-image: url("https://cdn.pixabay.com/photo/2014/01/04/12/34/road-238458_960_720.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<h3>This web page has Background</h3>
</div>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Background Stretch Image in HTML
If we want the background image to stretch to fit the full-screen width & height, we can set the value of background-size to 100% 100%.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="robot.png">
<title>Images</title>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
}
div {
width: 800px;
height: 500px;
background-image: url("https://cdn.pixabay.com/photo/2014/01/04/12/34/road-238458_960_720.jpg");
background-attachment:fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<h3>This web page has stretched Background</h3>
</div>
</body>
</html>
When you run the above HTML code, you will get the following output in the browser.
Here, in this article, I try to explain Background Images in HTML with Examples and I hope you enjoy this Background Image in HTML with Examples article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.
Good Example for Image’s.