How to create a Full-Page Background with CSS ?
Last Updated :
09 Feb, 2024
To create a full-page background with CSS, set the body’s height to `100vh` to cover the viewport, and add a background image using `background-image`. Ensure the image fills the entire viewport without distortion by setting ‘background-size: cover’. Optionally, adjust ‘background-position‘ and ‘background-repeat‘ for alignment and repetition preferences.
Syntax
body {
height: 100vh;
width: 100vw;
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Approach
- Set
height: 100vh;
for the body to cover the viewport height.
- Use
background-image
to add the desired image.
- Adjust
background-size: cover;
to ensure the image covers the entire viewport without distortion.
- Optionally, set
background-position: center;
and background-repeat: no-repeat;
for better alignment and to prevent repetition.
Example: Implementation to create a full-page background.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >Full Page background</ title >
< style >
body {
margin: 0;
padding: 0;
height: 100vh;
background-image: url(
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
</ style >
</ head >
< body >
</ body >
</ html >
|
Output:
Example 2: Implementation to create a full-page background using background-size
property to 100% 100%.
This instructs the browser to stretch the background image both horizontally and vertically to cover the entire viewport without distortion
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >Full Page Background</ title >
< style >
body {
margin: 0;
padding: 0;
height: 100vh;
background-image: url(
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
color: #fff;
text-align: center;
}
.content {
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
height: 250px;
width: 300px;
margin-left: 200px;
}
.btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</ style >
</ head >
< body >
< div class = "content" >
< h1 >Welcome to GeeksforGeeks</ h1 >
< p >
Discover a world of
knowledge and opportunities
</ p >
< a href = "wwww.geeksforgeeks.org"
class = "btn" >
Get Started
</ a >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...