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(
/* 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:
Last Updated :
08 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...