[Resolved] Background image for specific pages

[scometamus]

Dear GP-support,

on the attached page (and only on this and other selected pages) I’d like to add a background image.

Thus the customiser option of GP Premium doesn’t work for me, as these background images apply to all pages.

I was able to gather some code in this forum that is supposed to solve my problem:

/* Background Image on link pages */
.body.page-id-490 {
    background-image: url('https://test-site.com/wp-content/uploads/2023/03/background-image.jpg');
}

The page ID from that page (ID 490) I got from the inspector. But it doesn’t work so I suppose I did something wrong here.

[Ying]

Hi there,

There’s an extra . before body.

Try this:

/* Background Image on link pages */
body.page-id-490 {
    background-image: url('https://test-site.com/wp-content/uploads/2023/03/background-image.jpg');
}

[scometamus]

This unfortunately did not solve the issue. There still doesn’t appear any background image.

[Leo]

Might be the wrong quoation mark.

Can you try this instead?

/* Background Image on link pages */
body.page-id-490 {
    background-image: url("https://test-site.com/wp-content/uploads/2023/03/background-image.jpg");
}

Please disable clear and disable any caching or optimization plugins if this still doesn’t work – we would need to inspect the code.

[scometamus]

Changing ‘ to ” did not change anything unfortunately.

I emptied the cache and then disabled Autoptimize. Let me know how can I further assist finding the issue.

[Leo]

Where are you adding the CSS? It’s simply not showing up in the page source at all.

[scometamus]

Via the child theme. I see changes I make there though! This is odd!

[Ying]

In your other topic, I provided the below CSS, but there’s a { missing after @media (min-width: 1025px), please try adding the { to check.

 /* Artist Rooster centered */
@media (min-width: 1025px)
.home .entry-content {
    display: flex;
    align-items: center;
    min-height: 100vh;
    flex-wrap: wrap;
    justify-content: center;
}
}

[scometamus]

Didn’t work unfortunately. Updated the complete css code privately.

[Ying]

Not able to get the file to work.

Can you just link me to your site?

[scometamus]

Sure, attached.

[Ying]

Your content background color is set to white in the customizer, the color sits on top of the body background, so you are not able to see the body background image.

[scometamus]

I see, that’s getting too complicated then. I just moved to a simple background color (instead of an background image) for now. Thanks!

[Ying]

Maybe try adding this CSS so set the homepage’s content area background color to transparent.

.home .site.container {
    background-color: transparent;
}

[Author]

Posts