How to Make Background Image Responsive in WordPress

Last updated on Oct 20, 2019 by [email protected]

How do you make a background image responsive in WordPress? Why should you make your backgrounds responsive?

Making a website in WordPress can be tricky, especially if you’ve never used the platform before. Many people have questions about making their background images responsive, so that’s what we’ll cover in this article. 

You’ll discover:

• Benefits of making a background image responsive in your WordPress theme
• How to make a background image responsive
• What is the best size for a responsive background image
• Tools and resources for making a background image responsive
• Where to find more about responsive background images in WordPress

Benefits of Making a Background Image Responsive in WordPress

How, exactly, will making your background images responsive benefit you and your site? In the past, WordPress users expected to create their sites on a desktop computer and have their site viewed on desktop computers. Now, many more people view WordPress sites on mobile devices and tablets. These differently sized displays require different image sizes to maintain the site’s visuals.

You can have the ideal WordPress theme, background color, header image and an amazing featured image, but if you don’t make your background images responsive, mobile and tablet users end up seeing a cropped image on their screens instead of the full image you intended.

You can solve this issue by creating responsive images that will automatically resize, maintain their sharpness and load quickly, no matter the size of screen people use to view them, or how old their device is. If your background is a video, you can even make that responsive with the help of a plugin.

The other benefits of responsive web design include:

SEO

Your mobile and desktop pages won’t compete for rankings or suffer blacklisting for duplicated content. In other words, your website won’t be “counted twice” and penalized by search engines. You also get to keep all the backlinks that you created through link building, as well as organic linking.

Content Value

Mobile websites were often just lite versions of the desktop ones. By having responsive web design, the content value of your desktop site is also shared by your mobile site.

Brand Coherence

When your desktop and mobile sites share the same layout, it makes it easier for people to navigate around, as well as recognize your branding. In creating responsive background images, you ensure that your mobile and desktop sites look and behave the same, which will make your users happy!

Faster Loading Time

Responsive images load faster because they use the correct image size for each device. This lessens the chance of viewers clicking away when the page loads slowly. Google also uses page loading speed as a factor in its rankings, so the faster the better.

Steps to Making a Background Image Responsive in WordPress

You’re probably wondering how difficult making your images with a responsive design is going to be, especially if you don’t know how to code!

Most WordPress themes these days are made to be responsive to a certain level, but you can run into problems with some images not resizing properly. You can get plugins for WordPress that will make your images responsive, but doing it yourself really isn’t that difficult. In a few minutes, we’ll go over a step-by-step guide to explain the process.

What is the Best Size for a Responsive Background Image in WordPress?

WordPress will automatically generate image size when you upload your photo to your site. And, when it discovers the proper image size, it even takes into consideration the aspect ratio so that the image doesn’t distort. For those who know next to nothing about image resizing, compression and aspect ratio, letting WordPress do it for you is the best idea.

However, if you would rather be in control of image sizes yourself, here are some rough custom image size guidelines for different image types in WordPress:

• Blog posts: 1200 x 630px
• Full screen image: 2880 x 1500px
• Landscape feature image: 900 x 1200px
• Portrait feature image: 1200 x 900
• Fullscreen slideshow: 2800 x 1500px
• Gallery images: 1500px x auto width

How to Make a WordPress Background Image Responsive

There are several different ways to create responsive background images with code, but I find the method below to be the easiest to follow and understand.

1. Identify the Image Class

To make background images responsive, you are going to have to use some CSS (Cascading Style Sheet) coding language. Don’t panic — you don’t need to be a programmer to follow these steps. That being said, it will take a little more effort than simply moving a slider!

Note: You can’t customize a free WordPress site with CSS. In order to edit a theme using CSS, you’ll have to have a paid plan with WordPress.

First, find the picture in WordPress that you want to make responsive. Hover the mouse over it and right click:

Choose Inspect from the menu. A new window will open up on the right, and it will be full of coding language:

2. Copy the Highlighted Code

You’ll see a portion of the code that’s highlighted in blue. Right click the highlighted section, hover over Copy, and click Copy Selector:

3. Customize WordPress Settings

Then, in the Site Settings, go to the Design menu. Click Customize:

From the Customize menu, go to Additional CSS. Paste the Selector you copied.

4. Add These Extra Lines of Code

Next, add these lines of code after the selector you just pasted.

Replace #footer.solid-bg with the selector you copied and replace the url() with the actual url of the background image you are using:

#footer.solid-bg {
background: #000000 url(../../../wp-content/uploads/2018/01/bund-3-e1516874123488.jpg) no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

5. Save Changes and Check Your New Responsive Image

Save the changes you’ve made and have a look at the edited page on different screens. If you don’t have access to other devices, WordPress offers a handy way to check. Just right click on the photo in WordPress, then click Inspect.

A text window will open up again to the right, but ignore it for now. Instead, locate this device icon in the upper toolbar:

Click the icon so that a drop-down menu appears along the upper toolbar containing a list of different devices:

Click on each device name in the list, and the display image will change to show you how your photo will look on each one. For example, this is how your page will display on a Galaxy S5:

Or on an iPad Pro:

Another useful feature of this menu bar is that it will let you see how your page will look on online, on a mid-tier mobile, low-end mobile, or offline:

6. Use the Extra Code if Needed

If that code you used above doesn’t work for mobile devices for some reason, enter this code the same way you did before:

@media only screen and (max-width: 478px) {

#footer.solid-bg {

background-size: 100%;

}

}

It’s very important that you keep the double brackets in this code!

7. Save and Check Results Again

Save all the changes and check your results. Your background image should now be responsive on all devices.

Tools and Resources for Making a Background Image Responsive in WordPress

See, that wasn’t so bad! All you really need is some CSS code to make your background images responsive in WordPress. Most up-to-date WordPress themes create responsive images automatically, but you can add custom sizes to the code if necessary.

If you’re still not sure about creating responsive design, there are plugins available to remove that worry. With these plugins, all you have to do is upload your images and concentrate on creating your blog content instead.

How Do You Compress Large Background Images in WordPress so They Can Still Be Responsive?

When you upload large original images for a hero image or featured image, they can take longer to load on screen than smaller ones. The same thing happens if you have galleries of images to load.

This can be a problem. According to Neil Patel, 40% of people will leave your website if it takes longer than 3 seconds to load, and we already mentioned that Google takes page load times into consideration when ranking pages.

This is why you need to compress your images in such a way that they won’t lose quality, but will load quickly. Compressing them strikes a compromise between image size and image quality.

There are a lot of image compressing apps on the internet, and many of them are free and easy to use. Simply download one and follow the in-app instructions.

That brings us to the different types of image formats you should — and shouldn’t — use for responsive background images.

What Image Format Should You Use for a Responsive Background Image in WordPress?

You can use JPEG or PNG images for WordPress, and it won’t make a difference what theme you use. JPEG images compress smaller than PNG ones, without sacrificing much quality. However, graphics don’t compress well in JPEG, and there is a visible difference in the image quality.

So, for photos, use compressed JPEG. For graphics, try compressed PNG images.

Best Tutorial for Making a Background Image Responsive in WordPress

There are tons of tutorials out there on how to get the most out of your WordPress site, but you need to find one that is easy to understand. There are many different WordPress themes and WordPress plugins you can use to make life easier, but it can all get very confusing if you don’t know how to use them.

Some tutorials assume you know all about coding, and you may quickly find yourself out of your depth and feeling frustrated. All you want to know is how to make your photo or video background responsive!

Google is going to be your friend for this, and the key is reading carefully through any tutorial before you try it. If you just plunge right in, you may find that you hit a dead end, or worse still, make changes that you can’t undo!

Conclusion

Making background images on your WordPress site responsive has never been more important than it is now, in the age of the smartphone and tablet. For those who may have large photography galleries or photo-heavy blog posts, it’s even more important to have quick loading pages to keep people interested and page rankings high.

Hopefully you have learned a little bit about responsive design, image compression, how to add code to WordPress themes and how to check the results of your labor on different screens. There’s more than one way to change WordPress CSS code, and it depends which tutorial you use. But, as you get more confident in using code, you may well try all the methods to see which works best.

If you enjoyed this article, why not join our email subscribers list for more tips and advice about using WordPress? Don’t forget to follow us on Facebook and Twitter as well!