Hi! Custom Backgrounds are not showing up properly. For some strange reason, the background are only showing up above the footer on pages where they are set. Please help me resolve this issue.
There is the top of the page where you can see that no trace of a background exists. The other shows the footer image. Website link details will be included in a secure note.
Hi @fantasy_5,
Thanks for writing in.
I could not confirm the problem yet. Please share us your URL so could initially check your front end.
Don’t forget to check also if your setup is update to the latest version.
Updating guide:
https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 .
Then clear your cache before checking again.
Thanks.
Hi There,
I can see your site though I am not sure how do you want the background image to show. Can you give us screenshot? Do you want to remove white background so we can see background image behind it? Please do give us details so we can give you specific recommendation. Thank you.
Hi, Lely!
Thanks for your reply. I would like to have the backgrounds set with only one layer of the white page removed as for the footer I would like for it to remain white. Here are the screenshots below. Also, will these same options apply To all pages where a custom background is set? I would like them too. I prefer option #1 
Rather than option #2 
And I would like for the footer to keep it’s white background.
Lastly, is there a way to make the white space within the header go full length and width so the custom background doesn’t appear along the sides in the header and expands down to where the menu actually begins?
Hi there,
Due to the nature of the layout, it’s not currently possible. It’s a box layout which restricts the dimension of the entire layout. Hence, full-width can’t be done unless you’ll move it outside the limiting container. But please try adding this CSS to your global custom CSS
.custom-bg .x-colophon {
width: 100vw;
position: relative;
left: -2%;
right: -2%;
}
Then please add this CSS for background fix
.custom-bg div#below-logo-container {
margin-bottom: 0px;
padding-bottom: 16px;
}
.custom-bg .site > .x-container.max.width.offset {
border: 1px solid #fff;
padding: 40px 2%;
width: 100%;
}
.custom-bg #top {
background-color: transparent !important;
}
Then simply edit your page and go to Page settings section and find Body Class(es) option and add custom-bg.
Thanks!
Hi. Rad!
Thanks for the custom code. However, I did notice a few things.
When adding this code it causes the footer to be out of place looking like the attachment below on pages where there is a custom background so I removed it.
.custom-bg .x-colophon {
width: 100vw;
position: relative;
left: -2%;
right: -2%;
}
For some strange reason, I thought that custom backgrounds would work with the theme by default without adding additional CSS, but without the use of custom CSS the image only shows up in the footer of the page.
In using the code the code for option #1
the footer still remains full-width which is great, but if we use option two it would look like this…
As a test what would be the code for option #2 but with the footer being able to still expand the full width and full height whereas it doesn’t matter which option is chosen? I also noticed the code only works for the background of this specific page. On other pages where a background exists the background still does not appear properly. On pages where there is no custom background the footer looks like this which would be my preference for all pages if possible.
Sorry for the long reply!
Hi There,
Sorry but we can not picture out what you’re trying to do with the background-image, and it seems now you change it to a plain white image. If you could provide us a mockup design that would be appreciated.
I’ll provide you pieces of CSS code that might achieve what you need.
/*this will remove the white bg-color that covers the bg-image*/
div#top {
background-color: transparent !important;
}
When you add this code, you’ll see that some part of your header and content become exposed to the bg-image. Add this custom CSS to offset that.
/*add white bg-color to header*/
.masthead.masthead-stacked {
background-color: #fff !important;
}
/*add white bg-color to content container*/
.x-main.full {
background-color: #fff !important;
}
Don’t worry about the footer, it won’t be affected.
If you don’t like that bar of bg-image showing just above the footer, please add this to your custom CSS.
/*remove the empty space above the footer*/
.x-container.offset {
margin-bottom: 0;
}
Thanks,
Hi, Friech!
What I’m trying to accomplish was included in my replies and I sent screenshots. Did you actually read the thread? There is no white background setup only a coming soon page because my website isn’t live yet. I already provided login credentials. Please read the thread and log into the website so you can have a better understanding of the overall picture. Thanks.
Hi,
Do you have any ip address restriction set in your server?
We currently could not access your site.
Do you mind disabling it temporarily so we can check.
Thanks
Hi, Paul!
I’m not sure why you were unable to access the website unless it was due to my word fence plugin. However, I guess what’s really puzzling to me is the fact that this theme supposedly allows custom backgrounds by default but they do not appear unless you use CSS. Why is that? For instance the other code that was provided does display the background, but pushes the page down in order to do so. Here are two separate screenshots where the code is activated, a background is set.
This is the code that was given above.
.custom-bg div#below-logo-container {
margin-bottom: 0px;
padding-bottom: 16px;
}
.custom-bg .site > .x-container.max.width.offset {
border: 1px solid #fff;
padding: 40px 2%;
width: 100%;
}
.custom-bg #top {
background-color: transparent !important;
}
Prior to the change in the way the themes files were set up the backgrounds seemed to work fine now they don’t. I’m referring to the legacy, cranium folders, etc. How can this be fixed?
Hello There,
I have investigated your site and I noticed a few things. One thing I noticed is that, you are not seeing the custom background image because you have installed a plugin, PC Custom CSS that is overriding the theme style, adding a white background color with this custom css:
#top {
background-color: #fff !important;
}
I’ve made a test page with a background image and you can check it here: https://www.shopatkei.com/this-is-an-x-bg-test/
Do you want something like that? I added a featured image and a custom background image. I have created that page in Cornerstone so that I can insert my example texts and also I added a custom css to make sure that PC Custom CSS cannot take over the page. I have this code on the page:
body #top {
background-color: transparent !important;
}
body div#below-logo-container {
margin-bottom: 0 !important;
padding-bottom: 16px;
}
body .x-breadcrumb-wrap {
background-color: rgba(255,255,255,0.95) !important;
}
You may check the page out and see if this is what you want. Hope this helps. Please let us know how it goes.
Hi, Ruenel!
Thanks so much that was the exact look that I was going for with all pages that were designed using Cornerstone that uses a custom background. However, I do notice a shrink in the size of the envira gallery for regular pages using the envira gallery via shortcode versus adding the gallery as an element within the pages designed using Cornerstone. Is there an additional piece of CSS that can be used just to ensure the shrinkage of the gallery does not happen? I’m using the galleries throughout the website so I would like for the sizes to remain the same for all pages with or without a background. Also, how can I still use Click to tweet?
These pages can be found here (original)
https://www.shopatkei.com/collections/celebrity/
and here (duplicate)
https://www.shopatkei.com/collections/celebrity-2/
They are not behind the coming soon oage to you can follow the link please.
Hi there,
Please do not add additional questions in one thread and follow up the new questions by opening up new ones, so we will answer the Click to Tweet question in a new thread which you will open up.
Regarding the Envira Gallery, you need to give us more detailed information, the second link leads to a 404 page. I already am logged in to your website so there are no pages that I can compare and give you proper suggestions.
Please add 2 new test pages with each one with the settings that you say have different results, share the link of those pages and we will double check the case and if needed give you proper CSS code or settings suggestions to make the gallery look the same.
Thank you for your understanding and cooperation.
Hi, Guys!
If you view any page that falls under the collections tab you can see the difference in the size of the Envira galleries in comparison to pages which contain such galleries and were not built using cornerstone. However, it’s not a big deal.
Also, in reference to using click to tweet in cornerstone or any other third party plugin that uses a short code you can add them in cornerstone by placing your short code inside of a raw content element.
Lastly, with the code that was provided to show custom background for pages not using cornerstone…, is there a way to customize the code so that the other pages that have a background look identical to those that also have a background, but were build using cornerstone. For instance, I need to display background for this particular page Our Story
Hey @fantasy_5,
I’m sorry but I could not see a difference in Envira galleries. Would you mind opening a separate thread for this and give us specific URL and screenshots of the difference?
To add a background to your story page, please add this CSS
body.page-id-23 {
background-image: url(https://shopatkei.com/wp-content/uploads/2017/01/black-white-stripes.-background-1.jpg);
}
The Background Option which I see you have used was supposed to work. But, it uses Javascript to display the background and it couldn’t because it is hindered by other script errors from customizations and third party plugins.
That is, in addition to what @RueNel has discovered that a third party plugin is adding in some CSS which overrides the background.
Please temporarily remove customizations and deactivate third party plugins to see if the Background Option works.
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.