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
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.
...the content will be inside the body tag
we will be declared a style rule for the body element such as:
/* Location of the image */
/* Background image does not repeat */
/* Background image is centered vertically and horizontally at all times */
/* the background image rescale based on the container's size */
/* 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 */
/* Set a background color that will be displayed
while the background image is loading */
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.
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.
Shorthand CSS notation makes the CSS easier to describe the properties.
The equivalent shorthand CSS notation background properties for the above is:
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.