Open In App

How to set a Responsive Full Background Image Using CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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(
 
            /* 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(
            }
        }
    </style>
</head>
<body>
</body>
</html>


Output:



Last Updated : 08 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads