Skip to content
Related Articles

Related Articles

How to set a Responsive Full Background Image Using CSS ?

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Expert
  • 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.


background-size: auto; 



<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
      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(


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!