Open In App

How to set a Responsive Full Background Image Using CSS ?

Last Updated : 29 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The purpose of this article is to set a Responsive Full Background Image Using CSS.

To set a Responsive Full Background Image using CSS we will use the CSS background-size property that has a value auto that tells the browsers to automatically scale the image’s width and height based on the container, to make the element centered. And for small-size devices, we will add media queries that decrease the size of the image file to load fast.

Syntax:

background-size: auto; 

Example: In this example, we are implementing background-size property.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <style>
        body {
            /* Add image */
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210324142236/gfg_complete_logo_2x-min1.png");

            /* Make image center */
            background-position: center center;

            /* Make image fixed */
            background-attachment: fixed;

            /* Not repeat images */
            background-repeat: no-repeat;

            /* Set background size auto */
            background-size: auto;
        }

        /* Media query for mobile devices  */
        @media only screen and (max-width: 767px) {
            body {
                background-image: url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210324142236/gfg_complete_logo_2x-min1.png");
            }
        }
    </style>
</head>
<body>
</body>
</html>

Output:



Next Article

Similar Reads