On occasion we will get a support question from a customer saying that they’ve added a background image to a page, but it doesn’t show up.
While this certainly can be frustrating, there fortunately is a very simple fix.
The fix in most cases requires identifying the style in your site’s theme that is overlayed on top of the background image.
If that last statement has you scratching your head, it may help to visualize the problem.
In the image below, we see a mockup of a site with a header area and a content area with a white background. The mockup also has a background image, but it isn’t visible.
So why isn’t the background image visible? Well it may help to take a look at the “layers” that make up the site.
In the layered view above, you can see the site header and content area are sitting on top of a white background. But, the white background is sitting on top of the background image.
The white background in this case is added by the theme that the site is using, and is basically preventing the background image from being visible. It doesn’t mean that the background image isn’t there, it just isn’t able to be seen with everything as-is.
Fortunately, the fix is usually pretty simple.
The solution requires a small change to your theme’s CSS styling, which will make the theme’s background coloring disappear.
However, there is a bit of a challenge because most themes do not style the background in exactly the same manner.
Once the element that has been styled with a background color has been identified, the rest is pretty easy (in the images above the background color was white). You would need to add a style with
background: none; (or something similar to that) to the element.
A great way to identify the offending element on your page would be to use a plugin like CSS Hero. It’s a wonderful way to quickly identify elements on your page, then make and apply changes quickly with their intuitive CSS editing tools. No design experience is necessary!
We understand that not everyone is a designer, and may not be familiar with CSS edits. If you reach out to us, we’d be more than happy to assist with making those changes.
What the style change will do is make your site’s layers look more like this: