How to set a Responsive Full Background Image Using CSS ?

How to set a Responsive Full Background Image Using CSS ?

Last Updated : 29 Jul, 2024

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:

How to set a Responsive Full Background Image Using CSS ?

N

nikhilchhipa9

Improve

Article Tags :

Similar Reads

How to stretch and scale background image using CSS?

The background-size property is used to stretch and scale the background image. This property set the size of the background image. Here we will see all possible examples of background-size and background-scale properties. Syntax: background-size: auto|length|cover|contain|initial|inherit;cover: Thi

How to set multiple background images using CSS?

The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr

How to Create a Responsive Image Gallery using CSS?

Creating a responsive image gallery using CSS is a common task in web development. A responsive gallery adjusts to different screen sizes and ensures that images look good on devices ranging from mobile phones to desktop monitors. In this article, we will explore different approaches to creating a r

How to Set background Image using jQuery css() Method ?

This article will show you how to set the background image using jQuery. To set the background image, we are using the jQuery css() method. jQuery css() MethodThis method sets/returns one or more style properties for the specified elements. Syntax: Return a CSS property:$(selector).css("propertyname

How to Set Offset of Background Image from Right using CSS ?

In this article, you can see the ways by which you can set the offset of a background image from the right using CSS. The approach solving involves the use of the CSS background positioning property of background-position. This property is essentially used to specify the space from which the backgro