How to Add filter to the 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 Add filter to the 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 Add filter to the background image using CSS?

Adding filters to background images using CSS allows you to apply visual effects like blur, grayscale, brightness adjustment, and more without modifying the actual image file. CSS provides a set of filter functions that can be applied to elements with background images. This approach enhances design

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

How to Create a Responsive Image Grid using CSS?

A responsive image grid is a layout technique used to display images in a grid-like structure that adjusts dynamically based on the screen size to ensure that the grid looks good and functions well across various devices and screen resolutions. Below are the approaches to creat a responsive image gr

How to Fit Background Image to Div using CSS?

To fit a background image to a div using CSS, you can utilize the background-size property. Here are some approaches:1. Using background-size: cover;This method scales the background image to cover the entire div, maintaining the image's aspect ratio.HTML<html> <head> <style> .back

How to Set Background Image in CSS?

CSS (Cascading Style Sheets) can allow developers to set the background image for the web pages or specific HTML elements. This feature can help enhance the visual aesthetics of the website. The background-image property in CSS can be used to specific one or multiple background images to be applied

How to set a background color to full page using Tailwind CSS ?

Setting a full-page background color using Tailwind CSS means styling the entire viewport with a consistent background, regardless of content size. This is achieved by using classes like h-screen to cover the full height and bg-color or gradient classes to apply the desired color.Here are some commo