This will be a tutorial of some of the simplest techniques to making a fully responsive background that covers the entirety of the browser’s viewport. You don’t need JavaScript; we will only use the background-size property CSS.
Using Background-Size Property
CSS background-size can provide the value of the cover. This value informs the browser to proportionally and automatically scale with the image’s height and width on the background. This will mean it is always equal to the viewport’s height or width, if not greater than.
Media Query Serves Smaller Images for Mobile Devices
A media query is used to enhance the load speed of a page for smaller screens. It will serve to scale down the background image file. This is an optional method; the technique can still work without this.
Is serving a smaller image for the background to appease mobile device users a good idea?
For example, an image size of 5500 x 3600px will cover the majority of widescreen monitors on the market today. However, the file size is larger at 1.7MB.
This is a large file size for any situation, but even worse on mobile connections. Not to mention the massive image size is overkill for smaller screens, but we’ll cover that more later.
Let’s take a look at the Process:
The goal is to assign the image you want to use to the background of the body element. That way, the image will cover the entirety of the viewport.
This is, however, a technique that will also work on block-level elements (div or form). If the height and width of your black container are fluid, then it will scale to cover the entire container.
CSS
This is the style rule for the body element that is declared:
In the above code, the essential property pair to pay close attention to is:
background-size: cover;
Here is where the magic comes into play. This property/value will inform the browser to scale the image in a way that its height and width are proportionate. It will be greater than, or equal to, the height/width of the element in play. In the case of our example, the body element.
This property/value has an issue, though. If the image for the background is smaller than the dimensions of the body element, which happens on screens that are high-resolution and/or with a ton of content found on the page, the image is scaled up programmatically by the browser. When this happens, as we all have found out, the image becomes degraded outside its natural dimensions. This is called pixelation.
Once you scale an image above the dimensions of its original form, the quality will be affected.
That is something to keep in mind when you are picking out the image you want to use. The example above uses 5500 x 3600px, so there won’t be any trouble in the near future for larger screens.
Moving on, in order to set the background image, so it is centered at all times, we declare this:
background-position: center center;
This will scale the axis at the viewport’s center.
Now, we have to address the situation when the height of the content is greater than the viewport’s height. In this instance, there will be an appearance from the scroll bar. What happens under these circumstances is that the background will scroll when the user scrolls down. This can be very distracting. Another outcome is that you could run out of the image towards the bottom. In order to make it stay put, we just need to set the property of the background-attachment to be fixed.
background-attachment: fixed;
CSS Shorthand Notation
The background properties are written in full notation in order to easily describe the CSS.
Below is the notated shorthand CSS:
body {
background: url(background-photo.jpg) center center cover no-repeat fixed;
}
All that is needed to be done is change the value of the URL to point to the location of your image for the background, then you are set.
Small Screens: Media Query
Something that can be done for small screens is Photoshop. Proportionally resizing the original background down to 768 x 505px. Then you need to run it through smush. In order to cut out some more bytes. This will reduce the file size to 114KB from 1741KB. That is a file size reduction of 93%.
114KB is going to still be quite big; still, it is purely an aesthetic component of the design. If you want a 114KB payload, then only subject users if the file could have the potential for significant improvement in the UX. This is because of the huge trade-off of mobile web performance.
Here is the media query:
The max-width of the media query is set at 767px breakpoint. That means, in this situation, our viewport of the browser is greater than 767px. This will serve as the larger image file for the background.
There is a downside to this media query. If you find yourself having to, or choosing to, resize the browser window (say from 1200px width to 640px), you will see a flicker while the smaller/bigger background image is loaded.
Also, some small devices are able to render a lot more pixels. As an example, look at the iPhone5. It has a retina display that can render 1136 x 640px. A smaller image in the background will become pixelated.
In Conclusion
Just a cautionary note using this technique:
Use this technique with care. Larger files can affect the UX severely, especially when the user isn’t using a fast/reliable connection to the internet.
This is the main reason you should have a decent background color as your default. That way, the user is able to read all of the content while the image in the background is loaded.
