In this tutorial, we will introduce the most straightforward technique to fully stretch the background image to cover the entire browser viewport. We will use a CSS property to make this work. You will not need JavaScript, just background-size.
Responsive Full Background Image Examples
Large photos with backgrounds covering the entire web page are currently trendy.
Here are some websites with full background images:
If you want a similar look in your next web design project, you have come to the right place.
Key concept
That is the game plan.
Use the property labels background-size to cover all parts of the viewport. Using CSS property labeled background-size can make the value of cover. The value of cover is what will tell browsers to automatically and proportionally scale the height and width of any background image so that they will be greater than or equal to the height and width of the viewport.
Use media queries to provide smaller background images for mobile devices
To improve page loading speed on small screens, we will use media queries to provide a scaled-down version of the background image file. That is optional. The technology will work without this feature.
But why is it a good idea to provide a smaller background image for mobile devices?
The image I used in the demo is about 5500x3600px. This image size will allow us to cover most of the widescreen computer monitors currently on the market, but at the cost of providing 1.7MB files. That is pretty big for just a background picture, and it is not suitable for any situation, but it is even worse for mobile connections. Not to mention that the dimensions of the photo are too big for a mobile device.
Let us get on to the process:
HTML:
This is what you will need for a markup.
The background image will be assigned to the body element so that the image will cover the entire viewport in a browser. Although, this can also work on block-level elements like a form or div. If the height and width of the block-level container can be fluid, then the background image will scale to cover the container.
CSS
The style rule for the body element will be like this.
The one thing that you need to pay attention to is:
This is going to be where all of the everything will happen. The property/value is going to tell any browsers to make the images proportionate, so that height and width are greater than or equal to the height and width of the element. In the example, it would be the body element.
However, there is a problem with this attribute/value pair. If the background image is smaller than the size of the body element (which happens on high-resolution screens or when the page contains a bunch of content), the browser will zoom in programmatically image. Moreover, it is known that when an image gets scaled up from its natural size, the image quality will decrease (in other words, pixelation will occur). When the image gets enlarged beyond its original size, the image quality will be affected.
Please keep this in mind when choosing the image to use. The demo uses a 5500x3600px large-size photo displayed on a larger screen, so it will take a while for us to run into trouble.
Let’s continue. To keep the background image always in the center of the viewport, we declare:
Set the zoom axis above the center of the viewport.
Next, we need to deal with the case where the height of the content is higher than the height of the visible viewport. When this happens, a scroll bar will appear.
What we have to do is to make sure that the background image stays the same even if the user scrolls down. Otherwise, we either run out of images at the bottom, or the background moves as the user scrolls down (which can be very distracting). To do this, we set the background-attachment property to be fixed.
You can do is to download the demo, and then use the position attribute values (for example, background-attachment and background-position) to understand how it affects page scrolling and background image behavior.
The other attribute values are pretty self-explanatory.
CSS Notation in Shorthand
Use complete symbols to represent background properties to make CSS easy to describe.
The equivalent CSS shorthand notation above is:
All you have to do is change the URL value to point to the location of the background image, and you are good to go.
Media Query for Smaller Screens is Optional
For small screens, use Photoshop to scale the original background image to 768x505px and also cropped it through Smush.it to reduce more bytes. That can reduce the file size from 1741KB to 114KB. The file size has gotten reduced by 93%.
Don’t get me wrong; 114KB is still huge for the purely aesthetic part of the design. For the 114KB payload, due to the substantial mobile web performance tradeoff, if the file is likely to be significantly improved in UX, I usually only let users use it.
This is the media query:
The maximum width of the media query has been set to 767px breakpoint. That means that if a browser has a viewport bigger than 767px, it will serve larger background image files.
The disadvantage of using the above media query is that if you reduce the size of the browser window from 1200px to 640px (and vice versa), you will instantly see flickering when loading a smaller or larger background image.
Besides, because some small devices can show more pixels. However, smaller background images will be pixelated.
Conclusion
You can get the latest source code for this tutorial from GitHub. There is only one warning about this technique, and it is to please use it with caution because large files can seriously affect UX, especially when our users do not have a fast or reliable Internet connection. That is why you should set a reasonable default background color so that users can read the content when loading the background image. It’s never a bad idea to optimize web images before putting them into production.
