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

[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

[Leo]

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?

[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

[Leo]

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 🙂

[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

[Leo]

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

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

[Author]

Posts