How to Build a Website with a Background Image Using WordPress

Most people that try to build a website using a background image start with high hopes then wonder why they don’t see more websites using background images. They try for awhile. They run into some problems that they think that they can overcome. But from creating readable text to making the background image mobile compatible, the problems start to become overwhelming. Eventually most people realize that they are in over their heads, and they give up. There’s no shame in this. Setting up a site with a background image is hard. Fortunately, I have simple solution to these problems.

TL;DR

If you use WordPress, then you’re in luck. All the tools you need to build a site with a versatile background image are already available to you for free. Everything that’s complicated about setting up a site with a background image has been taken care of for you. All you need to do to get started is download the Big Breeze theme.

Assumptions

This tutorial assumes that you already have a webhost and know how to set up WordPress. If you don’t know how to do these things, then bookmark this page and go look it up.

Getting Started:
Adding the Big Breeze Theme

Once you have your WordPress site set up, go to the admin dashboard then go to Appearance > Themes, then click the “Add New” button, then type “Big Breeze” into the search bar. Next, go to Appearance > Customize. Click the “Change” button in the “Previewing theme” box. Find the “Big Breeze” theme and click the “Live Preview” button.

Adding Your Background Image

Next click on the “Background Media” tab, then click the “Select image” button, then select the “Upload Files” button and upload your image. If you don’t have an image, there are tons of free open source images available. Two of my favorite sources are:

• Unsplash
• Pexels

The Rest of the Big Breeze Theme

The Big Breeze theme has options that extend well beyond the scope of this post. To learn more, you can check out its demo website.

If You Have Trouble Uploading Your Background Image

WordPress takes the legwork out of compression. It’s important that your file is compressed to a reasonable size. When you upload your image, WordPress usually does this automatically if your image is large. But on occasion, it struggles. When it does, it is usually because of how php is configured on your server. You’ll have to look up how your web host gives you access to your php.ini files. There will probably be a tool in your dashboard. How you access it will vary from host to host. Once you have found it, you will probably find that you can upload the images you want with the following values:

• max_execution_time = 360
• max_input_time = 360
• max_input_vars = 4000
• memory_limit = 1024M
• post_max_size = 1024M
• upload_max_filesize = 1024M

Once you have done this, you will probably find that you can compress large images without any problem. You can tell the image has been compressed because the file size will be smaller, and it will usually have the word “scaled” added to the file title. If you are still having trouble compressing the images, then you may want to make the above values a little higher.

If updating your php.ini file is more than you want to deal with, then you can also elect to load a smaller version of your image or a different image. However, I would encourage you to try to learn how to update your php.ini file on your webhost because you will probably find that updating it will allow you to upload all of your website’s images more liberally, and updating the values will probably also generally improve site performance and content management.

Caveat for Background Images

There is one thing that you should realize about websites with background images. They do tend to load a little slower than websites without background images. All images reduce loading speed. But it’s important to realize that a lot of what people think users purportedly expect for site speed is driven by fear mongering bloggers that know that controversy equals clicks. However, if you take a look at more objective data, you’ll see that user expectations are actually a lot more modest than some people might lead you to believe. And if you don’t believe me, then consider this: Was this the fastest loading website you’ve been on today? No? Are you still reading my post anyway?

When you get hung up on what you think you’re supposed to do, then you can deny your creative potential and the things that people would want if they were available.

Ways to Improve Site Speed when Using a Background Image

You may find that your site loads just fine without any help. Oftentimes, if you are willing to pay for a premium webhost (or just a quality host at a quality price), you’ll find that they have taken care of everything for you. However, you may decide that you would like your site to load faster. There are several tools that you can use. I recommend the following support software. These tools are ordered based on a combination of ease of use and impact of performance. All of the software is free or has a meaningful free version. I would recommend this support software for any WordPress site, regardless of what theme you choose or whether or not you choose to use a background image.

Surge Caching Plugin

Surge is one of the newest caching plugins on the market. It is easy to use and every measure of performance that I have tried gives me the impression that it works. The only caveat is if your web host adds a must use caching plugin like the Endurance cache, then you may have to deal with conflicts.

Jetpack Boost

Jetpack Boost is also simple and effective. The only caveat is if you use it with the Big Breeze theme, it will disrupt the performance of the preloader if you decide to turn it on.

Jetpack Site Accelerator

Jetpack Site Accelerator is a feature within Jetpack. Note that Jetpack and Jetpack Boost are two different plugins. The site accelerator uses a CDN on some of your files, and it makes adjustments to your images to improve performance. Jetpack has its critics. It is a fairly large plugin. And some people don’t believe that the bloat it adds makes up for the performance enhancements that it provides. You should try it out for yourself and see how it performs. It isn’t that difficult to use.

Cloudflare

Cloudflare provides a more comprehensive CDN than Jetpack Site Acceleraor. It is also the most difficult of the performance enhancers to set up. If you got freaked out by updating the php.ini file, then you might want to stay away from Cloudflare. You’ll need to set up an account. And you’ll need to set up a plugin. This will require that you make changes on your webhost. And if you make a mistake, it can break your site. Look for and pay close attention to instructions regarding your security certificates. If you use Cloudflare, then you may find that it doesn’t work well with Jetpack Site Accelerator. Using redundant CDN’s can actually slow down loading speed.

GIMP

Images can crush your loading time. If you have a webpage that is loading slow, and you have images on it, one of the things to check is the file sizes of your images. If you have a page with a lot of images on it, getting your loading time down to a reasonable speed can be tricky.

Keeping your total image file sizes per page under 1MB is ideal. If you can get the total even lower, then it might help. But don’t be dogmatic. If it is above 1MB, then that’s fine, as long as you’re satisfied with your site’s loading speed.

WordPress does a pretty good job of compressing images right out of the box. If you only use a couple of images then you probably won’t have to do anything. WordPress also converts each image into four different image sizes to serve different screen sizes. So if you use WordPress to set your image sizes so that they are just large enough to fit the largest screen that they need to fit on, then you can get your file sizes even lower.

However, if you use a lot of images on one page and you use images types with large file sizes (like .png files), then you might find that WordPress does not provide enough compression support. GIMP is free software that you can use to amplify compression and convert file types.

GIMP is a beast and not the most user friendly. It is a full service image editor that has capabilities that extend well beyond what you will probably need for WordPress. However, if you need to compress your images more than WordPress provides, or you need to change the file type so it has a smaller file size, then you can follow these instructions:

1. In Gimp, go to File > Open, then choose the file you want to open. Gimp can be slow.
2. Go to File > Export As
3. If the file type reads .png then delete the .png and replace it with .jpg. You may also want to rename the file.
4. Click export, then lower the image quality to 50 percent or whatever value you think is best. You can check the box that reads “Show preview in image window”, and it will tell you what the file size will be.
5. Click Export.

Assessing the Performance of Your Background Image on Your Site

You should expect your site’s loading performance to be inconsistent. That’s normal for any site. Generally speaking, the more discounted your webhost, the more inconsistent you should expect your site’s loading times. Shared servers are more inconsistent than dedicated servers. Sites on cheaper webhost’s will generally reap greater benefits from support software than premium hosts. So the more you know how to do it yourself, and the more modest you keep your performance requirements, the more you can get away with using a cheaper webhost. You should evaluate your site’s median performance. Don’t evaluate it when it is running at its fastest or slowest.

Conclusion

If you want to build a website with a background image, then you don’t have anything holding you back anymore. You have everything that you need to know and more. Go out there and build your site.

Question About Adding a Background Image

If you have any questions about adding a background image, then please post them in the comments area.