HTML | Responsive full page image using CSS
Responsive Web design (RWD), is a design strategy developed to cope with the amazing popularity of mobile devices for viewing the Web. Responsive images are an important component of responsive Web design (RWD), Responsive web design is a new approach to website design that ensures users have a good viewing experience no matter what type of device they’re using.
Building separate sites for every type of device simply wouldn’t be sustainable. Instead, we can use the concept of responsive design, which calls for building flexible and fluid layouts that adapt to almost any screen.
- Bootstrap
- Foundation
- Pure
- Skeleton
- Semantic UI
Approach:
- First, we will use the H1 tag and add an image in the background.
- Our main goal is to keep the image centered vertically and horizontally to do this we will style the image by adding the CSS background property.
- After styling the image, if the user resizes the screen the image will shrink according to the device size.
Example: In the below example, we will have implemented the above approach.
HTML Code:
HTML
<!DOCTYPE html>
< html >
< head >
< title >Responsive Background Example</ title >
</ head >
< body >
< div class = "container" >
< div class = "image" ></ div >
< div class = "content" >
< h1 >Hi GFG</ h1 >
</ div >
</ div >
</ body >
</ html >
|
CSS Code:
CSS
body {
background-image : url ("../img/Fall-Nature-Background-Pictures.jpg");
background-position : center center ;
background-repeat : no-repeat ;
background-attachment : fixed ;
background- size : cover;
background-color : #464646 ;
color : white ;
}
|
OUTPUT
The output shows the background image in different viewports and resizes its size according to the device size.
Responsive full-page image using CSS
EXPLANATION:
To make the background image responsive using CSS we have used the CSS background properties. Each of them is explained below.
background-size: cover;
This property tells the browser to scale the background image proportionally so that its width and height are equal to, or greater than, the width/height of the element.
background-position: center center;
The above sets the scaling axis at the center of the viewport.
background-attachment: fixed;
The background is fixed with regard to the viewport.
Last Updated :
07 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...