HTML | Responsive full page image using CSS


Responsive Web design (RWD), 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.
Web designer Ethan Marcotte is credited with coining the term “responsive design.” In 2010, he published an article on A List Apart discussing the rapidly changing environment of devices, browsers, screen sizes, and orientations. Building separate sites for every type of device simply wouldn’t be sustainable. Instead, he proposed an alternative concept: responsive design, which calls for building flexible and fluid layouts that adapt to almost any screen.

There are several frameworks used by developers to make a webpage responsive.

  • Bootstrap
  • Foundation
  • Pure
  • Skeleton
  • Symantic

A responsive Full page background image scales itself according to the user’s viewport. There are several websites that use this effect such as-

This full page background image effect can be easily added to a webpage using CSS.
Example Implementation
Input
HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="css/main.css">
    <title>Responsive Background Example</title>
</head>
<body>
    <h1>Hi GFG</h1>
</body>
</html> 

chevron_right






                        filter_none










CSS













                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















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; 


} 



















                        chevron_right







                        filter_none










EXPLANATION

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

OUTPUT

The output shows the background image in different viewports.








full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
AyushSaxena
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.