Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set background image of a webpage?
Beautiful webpages are a very strong means of catching user attention. In this article, we are going to see how we can add an image as the background image of a web page using HTML and CSS approaches.
Methods to Set Background Image
There are two primary approaches to setting an image as the webpage's background image −
Using background attribute − The traditional HTML approach (deprecated in HTML5)
Using CSS background-image property − The modern and recommended approach
Method 1: Using Background Attribute
The background attribute can be used in the <body> tag to set an image as the background of the webpage. You need to specify the URL or the local path of the image file.
Note: This method is deprecated in HTML5 and should be avoided in modern web development. It's shown here for educational purposes only.
Syntax
<body background="URL or Path of Image"> Content of the webpage </body>
Example
Following example demonstrates using the background attribute with a local image file −
<!DOCTYPE html> <html> <head> <title>Background Image using HTML Attribute</title> </head> <body background="/css/images/css-mini-logo.jpg" style="font-family: Arial, sans-serif; padding: 20px;"> <h2 style="background-color: rgba(255, 255, 255, 0.8); padding: 10px; border-radius: 5px;">Setting Background Image with HTML Attribute</h2> <p style="background-color: rgba(255, 255, 255, 0.9); padding: 15px; border-radius: 5px;">This method uses the background attribute directly in the body tag. However, this approach is deprecated in HTML5 and CSS should be used instead.</p> </body> </html>
The output shows the webpage with the specified image as background −
Setting Background Image with HTML Attribute (heading with semi-transparent white background) This method uses the background attribute... (paragraph with semi-transparent white background) (Background image visible behind the content)
Method 2: Using CSS Background-Image Property
The recommended and modern approach is to use CSS. The background-image property allows you to set background images with additional control over positioning, repetition, and sizing.
Syntax
body {
background-image: url("path/to/image.jpg");
}
Example − Basic CSS Background
Following example shows how to set a background image using CSS −
<!DOCTYPE html>
<html>
<head>
<title>Background Image using CSS</title>
<style>
body {
background-image: url("/css/images/css-mini-logo.jpg");
font-family: Arial, sans-serif;
padding: 20px;
}
.content-box {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 8px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="content-box">
<h2>Setting Background Image with CSS</h2>
<p>This is the modern and recommended approach to set background images. CSS provides much more control over how the background image is displayed.</p>
</div>
</body>
</html>
The output displays the webpage with CSS-controlled background image −
Setting Background Image with CSS (heading in white content box) This is the modern and recommended approach... (paragraph in white content box) (Background image visible behind the content box)
Example − Advanced CSS Background Properties
CSS provides additional properties to control how background images are displayed −
<!DOCTYPE html>
<html>
<head>
<title>Advanced Background Properties</title>
<style>
body {
background-image: url("/css/images/css-mini-logo.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
font-family: Arial, sans-serif;
padding: 20px;
min-height: 100vh;
}
.info-box {
background-color: rgba(255, 255, 255, 0.95);
padding: 25px;
border-radius: 10px;
max-width: 600px;
margin: 50px auto;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="info-box">
<h2>Advanced Background Image Properties</h2>
<ul>
<li><strong>background-repeat: no-repeat</strong> - Image appears only once</li>
<li><strong>background-position: center</strong> - Centers the image</li>
<li><strong>background-size: cover</strong> - Image covers entire background</li>
<li><strong>background-attachment: fixed</strong> - Image stays fixed during scrolling</li>
</ul>
</div>
</body>
</html>
This creates a full-screen background image that doesn't repeat and stays centered −
Advanced Background Image Properties (heading in centered white box with shadow) ? background-repeat: no-repeat - Image appears only once ? background-position: center - Centers the image ? background-size: cover - Image covers entire background ? background-attachment: fixed - Image stays fixed during scrolling
Comparison of Methods
Following table compares the two approaches for setting background images −
| HTML Background Attribute | CSS Background-Image Property |
|---|---|
| Deprecated in HTML5, not recommended | Modern standard, widely supported |
| Limited control over image display | Full control with additional properties |
| Image always repeats and tiles | Control repetition with background-repeat
|
| No positioning control | Position with background-position
|
| No size control | Control size with background-size
|
| Mixes content with presentation | Separates content from presentation |
Syntax: <body background="image.jpg">
|
Syntax: body { background-image: url("image.jpg"); }
|
Best Practices
When setting background images, consider these important points −
Always use CSS instead of the deprecated HTML background attribute
Provide fallback colors with
background-colorin case the image fails to loadEnsure text readability by using contrasting colors or semi-transparent overlays
Optimize image sizes for web to improve loading performance
Use appropriate image formats (JPEG for photos, PNG for graphics with transparency)
Conclusion
While both HTML background attribute and CSS background-image property can set webpage background images, CSS is the modern and recommended approach. CSS provides superior control over image positioning, sizing, repetition, and attachment behavior, making it the best choice for professional web development.
33K+ Views
