Background image set in the Options> Layout and Design not displaying

Support
#1

Can you let me know why I’m not getting the main background image set in the theme options to display on a page? I can get a background image to display if I set that per page but would like for the default image to display what I set in the theme options layout and design settings.

you can see in this screenshot the background image that should be displaying. In the screenshot image it’s showing a background image that I set in that specific page’s content. So on the linked page why isn’t the background image that is set for the global background image not displaying?

#2

Hello There,

Thanks for writing in! I can see that your are using Ethos stack. To resolve your issue and make sure that background images will display, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.page-template-template-blank-4-php .x-main, 
.page-template-template-blank-5-php .x-main, 
.page-template-template-blank-6-php .x-main, 
.page-template-template-blank-8-php .x-main,
.site {
    background-color: transparent;
}

We would loved to know if this has work for you. Thank you.

#3

that does work but still curious why it wasn’t working by default as it should. thanks.

#4

Hi There,

May be there was some caching issue. Glad that it works now!

Thanks

#5

Ok I cleared cache today in Chrome and the background of the shop archive and blog became white which is not the color I want. so I found this css with inspect tool which then covered the set background image sitewide to be that background color and not the image. What is the appropriate way to set the color of the pages that don’t show the site background image such as the blog and products archive without setting the other page backgrounds to that color as well?

.x-root .site, .x-root .x-site {
flex: 1 1 auto;
position: relative;
width: 100%;
min-width: 1px;
background-color: #f3dab1;

#6

Hi There,

To specifically target the blog and archive pages only, please update your code to this:

.blog .x-root .site,
.archive .x-root .site {
	background-color: #f3dab1 !important;
}

You can discard the other CSS property since you only want to change the background-color.

Cheers!

#7

Ok thanks I’ll see what I can do with that :slight_smile:

#8

Sure, you are welcome :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.