How to Make Background Images Responsive?
.To make Background images Responsive or images, we will go over the simplest technique to make background images Responsive such as used images background properties and media query and also used Bootstrap define classes and properties. responsive, background images fully stretch out to cover the entire viewport. only we will use the CSS images properties (background-size) there is no requirement JavaScript code segment.
To cover the entire viewport use the background-size property
when you want to cover entire viewport with background image use the CSS background-size property can have the value of cover.
the cover value indicates the browser to automatically and proportionally scale the background images width and height so that they are always greater than or equal to, the viewport’s width/height.
Use a media query for the smaller responsive background image for mobile devices
we will use a media query to serve a scaled-down version of the background images file. this technique will work without this. this is optional
why for mobile devices serving smaller background images a good suggestion?
the images which have used is about 1500x900px. the dimension will have us covered on every widescreen computer monitors.
it’s exceptionally bad on mobile internet connections. the dimension of the image is excessive on small-screen devices.
Let’s Discuss through the process background images responsive
HTML
we are going to set the background image to the whole body element so that the image will always cover the entire viewport of the browser.
this technique will also work on such as a div or a form or any block-level elements. suppose that the height and width of your container are fluid, then the background image will always scale to cover the container entirely.
1 2 3 4 5 6 |
<!doctype html> <html> <body> ...the content will be inside the body tag </body> </html> |
CSS
we will be declared a style rule for the body element such as:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
body { /* Location of the image */ background-image: url(image/background-image.jpg); /* Background image does not repeat */ background-repeat: no-repeat; /* Background image is centered vertically and horizontally at all times */ background-position: center center; /* the background image rescale based on the container's size */ background-size: cover; /* Background image is fixed in the viewport so that it doesn't move when the content's height is greater than the image's height */ background-attachment: fixed; /* Set a background color that will be displayed while the background image is loading */ background-color: #efefef; } |
here, the most important property/ value pair is
background-size : cover;
that’s where you pay attention and will happen magic, this property/value pair tells the browser to scale the background image proportionally so than its width and height are greater than or equal to
the width and height of the element.
sometimes you will be facing an issue with the property/value pair through – if the background image is smaller than the body element’s dimensions and these issues you will be faced on the high-resolution screens
and /or when you have got a ton of content on the page – the browser will programmatically scale up the image when we scale up an image from its natural dimensions, the image quality degrades (such as pixelation occurs, words)
Let’s move on the background image is always centered in the viewport, we declare:
background-position: center center;
if you want to set the background images in the center the above sets the scaling axis at the center of the viewpoint.
background-attachment: fixed;
Next, we need to handle those situations where the content’s height is greater than the visible viewport height.
you will notice that this happens when a scroll bar will appear.
in this situation, you think that the background images stay put when the user scrolls down the page or else we will either run out of the image at the bottom.
you will notice that the background will move as the user is scrolling down.
to handle these situations we set the background-attachment property to fixed.
Shorthand CSS notation
Probably when you write the CSS code for properties (such as background properties) you wrote the background properties in full notation.
example:-
1 2 3 4 5 6 |
body { background-image: url(image/background-image.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; } |
Shorthand CSS notation makes the CSS easier to describe the properties.
The equivalent shorthand CSS notation background properties for the above is:
1 2 3 |
body { background-image: url(image/background-image.jpg) no-repeat center center fixed; } |
Media Query for viewports Devices: Optional
Here are the media query for all screen devices, using these media screen for responsive web pages and images.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/* ##Screen = 1281px to higher resolution desktops ##Device = Desktops */ @media (min-width: 1281px) { // Write CSS Here } /* ##Screen = Between 1025px to 1280px ##Device = Laptops, Desktops */ @media (min-width: 1025px) and (max-width: 1280px) { // Write CSS Here } /* ##Screen = Between 768px to 1024px ##Device = Tablets, Ipads (portrait) */ @media (min-width: 768px) and (max-width: 1024px) { // Write CSS Here } /* ##Screen = Between 768px to 1024px ##Device = Tablets, Ipads (landscape) */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { // Write CSS Here } /* ##Screen = Between 481px to 767px ##Device = Low Resolution Tablets, Mobiles (Landscape) */ @media (min-width: 481px) and (max-width: 767px) { // Write CSS Here } /* ##Screen = Between 320px to 479px ##Device = Most of the Smartphones Mobiles (Portrait) */ @media (min-width: 320px) and (max-width: 480px) { // Write CSS Here } |
For the small screen, the media query is set at a max-width: 767px breakpoint.
if the browser screen viewport is greater than 767px, it will serve the large background image file.
How to use Media query for Smartphones Mobiles (Portrait) screen?
1 2 3 4 5 6 7 8 9 |
/* ##Screen = Between 320px to 479px ##Device = Most of the Smartphones Mobiles (Portrait) */ @media (min-width: 320px) and (max-width: 480px) { body { background-image: url(image/background-image.jpg) no-repeat center center fixed; } } |
CSS code wrote for responsive design between 32px to 480px, which are media query for smartphones.
How to use Media query for Low-Resolution Tablets, Mobiles (Landscape) screen?
1 2 3 4 5 6 7 8 9 |
/* ##Screen = Between 481px to 767px ##Device = Low Resolution Tablets, Mobiles (Landscape) */ @media (min-width: 481px) and (max-width: 767px) { body { background-image: url(image/background-image.jpg) no-repeat center center fixed; } } |
therefore, it’s work between the screen size minimum 481px and maximum 767px.