Skip to content
Related Articles

Related Articles

Improve Article
How to set a Responsive Full Background Image Using CSS ?
  • Last Updated : 31 Mar, 2021

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 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:

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :