Archived topic
Overriding background image on single page
7 replies · Started by Leanne on June 6, 2021
Working on overriding the background image on this landing page: https://www.headlessgnomes.com/theorbtellerfreebie/
I'm using Elementor. There's a gap at the top and the bottom where the background image shows through.
I've used Elements already to turn off the page title and menu, etc.
I tried a hook element with css to turn the background image to none but it doesn't appear to be working.
Hi there,
Are you trying to remove the background image on that page only?
If so try this CSS:
body.page-id-1646 {
background-image: none !important;
}Hi Leo,
Yes, on that page only :) (though I may have more of these types of pages in the future)
I tried using a hook element that would only display on that page but it wasn't working.
Can you tell me where would I put the code? Would it go in a hook or in the theme editor additional css area?
Thanks!
Hi Leanne,
Leo's code is a CSS. It goes to the Additional CSS area. - https://docs.generatepress.com/article/adding-css/
The page you've linked seems to have a HTML syntax issue.
These HTML tags I've highlighted here - https://share.getcloudapp.com/NQuoe0YR - shouldn't show up after the <body> tag but it is on your site.
It's quite difficult to tell which one is causing this but you can find this out by disabling all plugins except GP Premium and see if it occurs.
You can also try disabling all the GP Elements and PHP snippets to see what causes this.
Thanks, Leo and Elvin!
I added the code to the Additional CSS area and deleted the hook which didn't appear to be working and it looks as should now :)
Is it fully sorted out now? Let us know if you need further help. :)
Yes it is fully sorted, thank you!
Nice one. Thanks for letting us know. :)
