Archived topic
Background not on all pages
15 replies · Started by Matthias on May 12, 2020
Hi there,
i have a background image i want to apply for most of my pages. Only about 5 excluded. Or the other way round - about 5 pages included. Beside those pages i also want to show it on every post under the hero/featured image - underlying the first part of the text (and maybe also in the shop).
Is there an option for that? So far i tried and using the background for "content" and "body" - but theses setting seem to apply for every page.
Hi there,
you can use CSS and classes that WP adds to the body to target specific pages. For example this would add a background to the <body> on the Home page:
body.home {
background-image: url('background_image_url');
background-size: cover;
}or this would be for the body of Page ID 1094
body.page-id-1094 {
background-image: url('background_image_url');
background-size: cover;
}If you wanted to add the same image to multiple pages you can string them like so:
body.home,
body.page-id-1,
body.page-id-2,
body.page-id-3 {
background-image: url('background_image_url');
background-size: cover;
}thx. But does it work the other way round?
As i want to allow it for most pages - and only about 5 main pages which i want to create with gb shoudnt be using it - is there a way to use the "normal" background plugin with content - and exclude those 5 by-id/name?
Or maybe i understood wrong - with your solution i would have to edit everytime i add a blog post, right? Which sounds like a suboptimal solution.
You would use the :not selector:
https://www.w3schools.com/cssref/sel_not.asp
Something like
body:not(.page-id-123):not(.page-id-456):not(.page-id-789) {
background-image: url('background_image_url');
background-size: cover;
}this doesnt seem to work - or i made a mistake:
i found the page id-s when hovering over the pagenames - and checking the link name for the number.
With that i added:
/* Background image disable on page-id */
body:not(.page-id-253):not(.page-id-26):not(.page-id-178):not(.page-id-30) {
background-image: url('background_image_url');
background-size: cover;
}I wasn't sure if i have to replace background_image_url - but also tried /wp-content/uploads/background.png instead.
Both didn't remove the background.png
Also - as i just checked the site information via firefox.
There are 2 graphics like this shown:
https://secure.gravatar.com/avatar/ffac606e72cf060f22e1b88050d8a3bb?s=64&d=mm&r=g
Where does that come from? I am on a virtual machine, wordpress installed on ubuntu server.
And as i need to apply GDPR/DSGVO - there should no image be loaded from an external source.
You got any clue on that?
Maybe this approach will be simpler - remove the CSS you have currently.
Go to Appearance > Elements and create a new Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/
Add this code with your image URL:
<style>
body {
background-image: url('background_image_url');
background-size: cover;
}
</style>Select the WP_Head hook
Set the Priority to 999
Then on your display rules you can set Location: Entire Site and in Exclusions add the pages you want it removed from
Once you have this fixed can you raise a new topic for your next question
I am not sure i am doing it right.
First: i deleted former from this topic css from childtheme style.css.
Also removed the background image in customize->background->content
Second: added a hook element named background image.
For the code field:
<style>
body.home {
background-image: url('/wp-content/uploads/background.png');
background-size: cover;
}
</style>Third:
Settings Tab:
Select the WP_Head hook
Set the Priority to 999
Fourth:
Display rules tab:
Location: entire page
Excluded - chosen one main page for now.
The things i am not sure about are:
- if this hook interferes with the customizer settings (therefore i removed them)
- if the image url is right (also i tried several variations it didn't make a difference)
Anyways - with these settings the background doesn't show anywhere so far.
The URL needs to be the full URL - try that.
If not can you link me to a page where it should be displaying so i can see what the issue is.
k - with full url it shows.
But only on the home page. All others the background is not showing.
You can see it when you scroll down a little - else its behind the orange.
The image-file is url /wp-content/uploads/background.png
Settings in elements->hook are as described.
Location: Entire site
Excluded: vision(which is the second menu entry as you can see)
I edited the entry post with my url.
Can you disable Autoptimize so i can take a closer look
done.
Doh in the CSS change:
body.home { to body {
that works :D
now "all" is left is the positioning/size.
I had:
content
no repeat
100%width
attachment
set in customize-> background -> content.
is it possible to ad these settings to the hook?
Each of them refers to a CSS property - so it would look something like this:
body {
background-image: url('background_image_url');
background-size: 100%;
background-attachment: initial;
background-repeat: no-repeat;
background-position: left top;
}more info on each here:
https://www.w3schools.com/css/css_background_shorthand.asp
thx . got it working with a little playing around
The code to achieve the settings in my last post are:
body {
background-image: url('background_image_url');
background-size: 100%;
background-attachment: initial;
background-repeat: no-repeat;
background-position: 0% -15%;
}
for some reason it is about -15% for the y%-position. With positive values the picture went up instead of down. Don't really understand why as i thought it can only be positive - but hey. it works...
Also it does not on my privacy policy page. But as this is created not via gutenberg but by a gdpr/dsgvo plugin i guess thats related to that. So keep that in mind if you trying to achieve the same.
thx a lot guys.
