How to set a Responsive Full Background Image Using CSS ?
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:
Please Login to comment...