๐ŸŽ‰ Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Support request] Background per page enlarges div.inside-article

Home Forums Support Background per page enlarges div.inside-article

  • This topic has 5 replies, 2 voices, and was last updated 5 months ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1153140
    Stef

    Hi,

    I am building a website for a customer and have setup a background for the whole site in the customizer. So far so good.

    Now my customer wants to have a unique background for each page belonging to menu choice A (same background for that specific menu item and the submenu’s (children of the parent).

    I experimented with it by setting the background image in the page itself. The problem that occurs is that as soon as I set the image it makes the width of the div.inside-article a lot larger.

    I am using extra CSS for the inside-article class in the custom css:

    .inside-article {
    color: #ffffff;
    background-color: #222222 !important;
    opacity: 0.95;
    filter: alpha(opacity=95);
    border-radius: 20px;
    }

    I have GP and the Premium updated to the latest version.

    Can you tell me what I am doing wrong?

    Best regards,

    Stef Westheim

    #1153153
    Leo
    Staff
    Customer Support

    Hi there,

    I experimented with it by setting the background image in the page itself.

    How are you doing this? With CSS?

    The problem that occurs is that as soon as I set the image it makes the width of the div.inside-article a lot larger.

    Not sure if I understand. Is the issue visible right now?

    #1153162
    Stef

    Hi,

    No I first tried the most simple method and that’s set the background image in each page in the editor (Edit page -> Document tab -> Fully background -> Set Background image). As soon as I use that, it screws up the width of the inside-article div.

    This is a page with background set through the customizer -> Background images -> Body:

    <the link I provided earlier>

    And on this page I load the same background again in the page editor itself:

    <the link I provided earlier>/columns/

    I don’t know what I am doing wrong here. I just want to overrule the default background per page or if possible per parentmenu->childmenu.

    Regards,

    Stef

    #1153201
    Leo
    Staff
    Customer Support

    No I first tried the most simple method and thatโ€™s set the background image in each page in the editor (Edit page -> Document tab -> Fully background -> Set Background image).

    GP doesn’t have the option to set the background image of each page so that option is likely coming from a third party plugin.

    We can set background image for individual pages by using CSS like this:

    .page-id-1087 .site {
        background-image: url("https://URL-HERE")
    }

    The above CSS will work for page id 1087 which is the /columns page.

    Let me know if this helps ๐Ÿ™‚

    #1153213
    Stef

    Hi,

    That changes the background of the container but not the whole body. Check the columns page and you can see for yourself.

    I doubt that this will be a solution that’s easy to use for my customer. They want to update the website themselves and for each post they will have to find the page ID and edit the css file.

    Thanks for your quick response,

    Stef

    #1153223
    Leo
    Staff
    Customer Support

    If you want to change the body background then this would be the CSS:

    body.page-id-1087 {
        background-image: url(https://URL-HERE);
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.