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
Selected Reading
How to create a full-page background image with CSS?
Creating a full-page background image with CSS allows you to display an image that covers the entire viewport. This technique is commonly used for hero sections, landing pages, and creating immersive visual experiences.
Syntax
.background {
background-image: url('image-url');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
}
Key Properties
| Property | Value | Description |
|---|---|---|
background-size |
cover |
Scales image to cover entire container |
background-position |
center |
Centers the image in the container |
background-repeat |
no-repeat |
Prevents image from repeating |
height |
100vh |
Sets height to full viewport |
Example: Full-Page Background Image
The following example creates a full-page background image that covers the entire viewport −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.background {
background-image: url("https://images.pexels.com/photos/1424246/pexels-photo-1424246.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000");
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.content {
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="background">
<div class="content">
<h1>Welcome to Our Website</h1>
<p>Beautiful full-page background</p>
</div>
</div>
</body>
</html>
A full-page background image covers the entire viewport with centered white text overlaid on a semi-transparent dark background for better readability.
Method 2: Using Background Attachment
You can also create a fixed background that doesn't scroll with the content −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background-image: url("https://images.pexels.com/photos/1424246/pexels-photo-1424246.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100vh;
}
.content {
padding: 50px;
background-color: rgba(255, 255, 255, 0.9);
margin: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="content">
<h2>Fixed Background Example</h2>
<p>This background image stays fixed while scrolling.</p>
<p>Add more content here to test scrolling behavior.</p>
</div>
</body>
</html>
A fixed background image that remains stationary while the content scrolls over it, creating a parallax-like effect.
Conclusion
Creating full-page background images with CSS involves using background-size: cover and height: 100vh for responsive coverage. The background-attachment: fixed property adds an elegant scrolling effect for enhanced user experience.
Updated on: 2026-03-15T14:26:12+05:30
689 Views
Advertisements