How To Change Background Image Size In Css

In this tutorial, nosotros'll go over the simplest technique for making a background prototype fully stretch out to cover the entire browser viewport. We'll utilise the CSS background-size belongings to get in happen; no JavaScript needed. View Demo Download Source from GitHub

Examples of responsive total background images

Having a large photo that covers the entire background of a web page is currently quite pop. Here are a few websites that have responsive total groundwork images: Sailing Collective Digital Telepathy Marianne Restaurant If you'd like to reach a similar look in your side by side web design project, you're at the right spot.

Core concepts for creating responsive background images with CSS

This is our game plan.

Apply groundwork-size property to embrace the entire viewport

The CSS groundwork-size belongings tin have the value of cover. The comprehend value tells the browser to automatically and proportionally calibration the background paradigm'southward width and acme so that they are always equal to, or greater than, the viewport's width/height.

Apply a media query to serve a smaller background prototype for mobile devices

To enhance the page load speed on small screens, nosotros'll employ a media query to serve a scaled-downward version of the background image file. This is optional.

The technique will work without this.

But why is serving a smaller background image for mobile devices a skilful idea? The paradigm I've used in the demo is about 5500x3600px. This dimension will have united states covered on most widescreen figurer monitors currently being sold in the marketplace, but at the expense of serving up a one.7MB file.

That huge of a payload just for a groundwork photograph is never a good affair under any sort of state of affairs, but it's uncommonly bad on mobile net connections.

And too, the image dimension is excessive on pocket-size-screen devices (more on this further down in this tutorial).

SEO and web design are like peanut butter and jelly. Find out why in our Gratis guide: How to Integrate SEO and Spider web Design.

Show ME THE GUIDE

Let's walk through the process.

HTML

This is all you need for the markup:

<!doctype html> <html> <body>          ...Your content goes hither...          </body> </html>

Nosotros're going to assign the background paradigm to the torso chemical element and so that the paradigm volition always encompass the unabridged viewport of the browser. However, this technique volition likewise work on any block-level element (such equally a div or a form).

If the width and height of your block-level container is fluid, then the background image will ever scale to cover the container entirely.

CSS

Nosotros declare a fashion dominion for the body element like so: body { /* Location of the image */ background-prototype: url(images/groundwork-photo.jpg); /* Background image is centered vertically and horizontally at all times */ groundwork-position: heart center; /* Background image doesn't tile */ background-repeat: no-repeat; /* Groundwork paradigm is stock-still in the viewport so that it doesn't motion when the content's elevation is greater than the image's pinnacle */ background-zipper: fixed; /* This is what makes the background prototype rescale based on the container'south size */ background-size: cover; /* Set a background color that will exist displayed while the background image is loading */ background-colour: #464646; } The most essential property/value pair to pay attending to is:

background-size: cover;

That'south where the magic happens. This property/value pair tells the browser to scale the background prototype proportionally so that its width and top are equal to, or greater than, the width/summit of the element. (In our case, that's body element.)

In that location'due south an issue with this property/value pair though: If the background prototype is smaller than the torso element'south dimensions — which will happen on high-resolution screens and/or when y'all've got a ton of content on the page — the browser will programmatically scale upwardly the image.

And, as we all know, when nosotros scale upwardly an image from its natural dimensions, the image quality degrades (in other words, pixelation occurs). When an image is scaled up in a higher place its natural dimensions, image quality is affected. Keep that in mind equally y'all choose which image you're going to employ.

The demo uses a huge 5500x3600px photo for larger screens so information technology'll be a while before we run into trouble. Let's motion on. So that the background image is always centered in the viewport, we declare:

background-position: center center;

The to a higher place sets the scaling axis at the heart of the viewport.

Next, we need to bargain with the state of affairs where the content's height is greater than the visible viewport'southward height. When this happens, a scroll bar will appear. What we desire to practise is brand sure that the background image stays put even when the user scrolls down, or else nosotros'll either run out of prototype at the bottom, or the groundwork will movement as the user is scrolling down (which tin can be very distracting).

To exercise this, we set the groundwork-attachment property to fixed.

background-attachment: fixed;

In the demo, I included a "load some content" feature and so that you tin see the scrolling behavior when background-attachment is fixed. 1 thing you could do is download the demo and then play around with the positional property values (e.g. background-attachment and background-position) to see how it affects the behaviors of page-scrolling and the background paradigm.

The other property values are pretty self-explanatory.

For even more than digital marketing advice, sign up for the email that more than 190,000 other marketers trust: Revenue Weekly.

Autograph CSS note

I wrote the background properties in full notation to make the CSS easier to describe. The equivalent shorthand CSS annotation for the above is: body { groundwork: url(groundwork-photograph.jpg) centre center embrace no-echo fixed; } All yous have to do is change the url value to indicate to the location of your background image, and you're skillful to go.

Optional: Media query for small screens

For small screens, I used Photoshop to proportionally resize the original groundwork image downwardly to 768x505px and I also ran it through Smush.it to cut out a few more than bytes. Doing this reduced the file size downward from 1741KB to 114KB. That's a 93% reduction in file size.

Please don't go me wrong, 114KB is withal quite big for a purely artful component of a design. For a 114KB payload, I would normally only subject users to it if the file had the potential to add together a significant improvement in UX, because of the huge mobile web performance merchandise-off. Here's the media query: @media but screen and (max-width: 767px) { body { /* The file size of this background image is 93% smaller to better page load speed on mobile net connections */ background-image: url(images/background-photo-mobile-devices.jpg); } } The media query is prepare at a max-width: 767px breakpoint, which in our case means that if the browser viewport is greater than 767px, it will serve the larger background image file.

The downside of using the media query to a higher place is that if y'all resize your browser window from, for case, 1200px width down to 640px width (or vice versa), you lot will momentarily see a flicker while the smaller or bigger groundwork image loads up. In addition, because some small-scale devices can render more pixels — for example, iPhone five with its retina display tin render 1136x640px — the smaller background epitome will be pixelated.

Create your starting time responsive background paradigm with CSS

Y'all can get the almost current source code of this tutorial from GitHub. If I can say only one cautionary thing about this technique, it's this: Please use it with intendance because large files can severely affect UX, especially when our user is not on a fast or reliable Internet connection. This is also the reason why you should set a good default background color so the user can read the content while the background image is loading.

Optimizing your Web images before putting them up on production is never a bad thought either; we've got some articles to help with this:

Guide to Saving Images for the Web
Tools for Optimizing Your Images
A Crash Class Guide on JPEG
Avant-garde Image Optimization Tricks

License: Public Domain Dedication

No demand to enquire permission if you lot want to use the source lawmaking included in this tutorial; I've placed the tutorial's code in the public domain under CC0 ane.0 Universal. The source lawmaking in my GitHub repo is costless of any copyright restrictions. Y'all can use, sell, modify, and distribute the source code, all without asking permission, providing attribution, or whatever other requirement.

(I don't own the groundwork image though, it'south from Unsplash.)