[Resolved] Background not on all pages

Home Forums Support Background not on all pages

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1280374
    Matthias

    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.

    #1280480
    David
    Staff
    Customer Support

    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;
    }
    #1281157
    Matthias

    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.

    #1281641
    Leo
    Staff
    Customer Support

    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;
    }
    #1282222
    Matthias

    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?

    #1282235
    David
    Staff
    Customer Support

    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

    #1282351
    Matthias

    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.

    #1282740
    David
    Staff
    Customer Support

    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.

    #1283778
    Matthias

    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.

    #1283896
    David
    Staff
    Customer Support

    Can you disable Autoptimize so i can take a closer look

    #1283971
    Matthias

    done.

    #1284025
    David
    Staff
    Customer Support

    Doh in the CSS change:

    body.home { to body {

    #1284038
    Matthias

    that works 😀

    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?

    #1284101
    David
    Staff
    Customer Support

    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

    #1285237
    Matthias

    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.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.