How to create a Full-Page Background with CSS ?
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;
andbackground-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( 'https://media.w3wiki.net/wp-content/cdn-uploads/20220512131412/Student-Chapter-Article-Banner.png'); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; position: relative; } </ style > </ head > < body > <!-- write your content here --> </ 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( 'https://media.w3wiki.net/wp-content/cdn-uploads/20220512131412/Student-Chapter-Article-Banner.png'); 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 w3wiki</ h1 > < p > Discover a world of knowledge and opportunities </ p > < a href = "wwww.w3wiki.net" class = "btn" > Get Started </ a > </ div > </ body > </ html > |
Output:
Contact Us