How To Make Header Background Image Responsive

Sometimes it's all-time to load and display dissimilar images for different screen sizes. For example, a very large header paradigm that works for a large desktop screen may non be necessary or even wait correct on a phone in portrait mode.

Say I want to create a header for my new website. I'yard going to get-go with this high-resolution photo by Graham Holtshausen on Unsplash.

The outset affair I'thou going to do is compress the image down and then the width is 2560 pixels. Nearly screens won't go higher than this so this is a expert maximum.

Since this is a header image, I'1000 going to crop it and so it's brusk and wide. I'1000 cropping on center with the superlative at 100 pixels.

Note that the epitome may appear less than 2560 x 100 on this web log postal service.

Finally, I'll darken the center, add a logo, and add together text in Photoshop to create the header.

Now I can create a page using this header at the top.

                      <!doctype              html>            <html              lang="en">            <caput>            <meta              charset="utf-8">            <meta              proper name="viewport"              content="width=device-width, initial-scale=1, shrink-to-fit=no">            <link              rel="stylesheet"              href="styles/normalize.css">            <link              rel="stylesheet"              href="styles/main.css">            <title>My Site</title>            </head>            <torso>            <img              src="images/header.png">            <div              course="container">            <!-- The contents of the folio will go here. -->            </div>            </body>            </html>

Discover I'm using Normalize.css (to make browsers return all elements more than consistently). And I've included another stylesheet. Right now the styles are pretty minimal.

                      html            {            font-size:            22px; }            .container            {            width:            80%;            margin:            0            auto; }

The site looks similar this.

Oh no. The main part of the header isn't visible. Plus, the huge width makes the site curlicue horizontally. Nosotros tin set it with a little bit of HTML…

                      <header>            <img              src="images/header.png">            </header>

…and a piffling bit of CSS.

                      header            {            overflow: hidden; }            header            img            {            margin-left:            50%;            transform:            translateX(-fifty%); }

With those changes in place, the header looks improve!

But look what happens on smaller screens.

The header is cut off. On actress minor devices like this (portrait phones) with a max width of 576 pixels, information technology might be nice to but prove the ice foam logo. To do that, I create a smaller header epitome with but the logo. This epitome is 576 x 100 pixels.

To become this prototype to show on actress small devices, but the other image on larger screens, we tin can apply the <picture> and <source> elements.

I replace the <img> in the <header> with a <moving-picture show> element.

                      <header>            <picture>            <!-- Our sizes and image sources become here -->            </picture>            </header>

Inside the <picture>, we'll place a couple <sources>.

                      <header>            <pic>            <source              media="(max-width: 576px)"              srcset="images/header-576.png">            <source              media="(min-width: 577px)"              srcset="images/header-2560.png">            </picture>            </header>

You tin come across that header-576.png volition be displayed on screens up to 576 maximum width. The other image — header-2560.png — will exist shown on devices 577 pixels and upwards.

In addition to these two sources, I'll also add the big original header equally a fallback in an <img> chemical element.

                      <header>            <moving picture>            <source              media="(max-width: 576px)"              srcset="images/header-576.png">            <source              media="(min-width: 577px)"              srcset="images/header-2560.png">            **<img              src="images/header-2560.png">**            </flick>            </header>

I add this fallback because <motion picture> isn't quite supported across the board. Hither's the compatibility table at the fourth dimension of this writing.

[Tin can I use… compatibility table for <picture> element](https://cdn.hashnode.com/res/hashnode/image/upload/v1627410284591/YImxvRHa2.html) Can I utilize… compatibility tabular array for <motion-picture show> element

Now that we've made our header more responsive, here'south how it looks on actress small devices.

On larger devices it withal looks adept.

How about medium devices (up to 922 pixels)? Uncomplicated. It's the same process.

Create a 922 x 100 pixel header.

And add the <source>.

                      <motion picture>            <source              media="(max-width: 576px)"              srcset="images/header-576.png">            **<source              media="(max-width: 922px)"              srcset="images/header-922.png">**            <source              media="(min-width: **923px**)"              srcset="images/header-2560.png">            <img              src="images/header-2560.png">            </motion picture>

Notation the additional change to the min-width of the largest <source>. Information technology's e'er 1 pixel higher than the previous max-width.

The images are dynamic, as well. If the user's viewport changes, the image automatically changes.

Your needs volition dictate which breakpoints you should include; In general, you lot might consider…

576px for actress small devices like portrait style phones
768px for small devices like mural phones
992px for medium devices like tablets
1200px for large devices like desktops
2560px for actress big devices like large desktops

These are the same breakpoints used by Bootstrap four.

Finally, there is another do good to using responsive images in this way: The only image(s) that become downloaded are the ones that meets the breakpoint media rules. This means that, on extra small devices, only header-576.png gets downloaded. In my case, it's five times smaller than the original header-2560.png; A savings of 465 kilobytes!

See the pen beneath for a live version of this project that you lot can play around with.

codepen.io/travishorn/pen/MPWLWB