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
<!-- index.html file --><!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
/* Style.css File */body { /* Image Location */ background-image: url("../img/Fall-Nature-Background-Pictures.jpg"); /* Background image is centered vertically and horizontally at all times */ background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: #464646; /* Font Colour */ 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.
Please Login to comment...