添加时间：2025-07-26 09:43:16
Back to: HTML Tutorials
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.
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.
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="https://dotnettutorials.net/lesson/background-images-in-html/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.
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="https://dotnettutorials.net/lesson/background-images-in-html/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.
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="https://dotnettutorials.net/lesson/background-images-in-html/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.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="https://dotnettutorials.net/lesson/background-images-in-html/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.
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="https://dotnettutorials.net/lesson/background-images-in-html/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.
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="https://dotnettutorials.net/lesson/background-images-in-html/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.
地址：海南省海口市电话：0898-08980898传真：0898-1230-5678
Copyright © 2012-2018 耀世娱乐-耀世注册登录入口 版权所有ICP备案编号：琼ICP备xxxxxxxx号
