[Resolved] Unique backgrounds for individual posts?

[Hakim]

I have been looking at the material on the Backgrounds facility in the plugin and it seems that it is designed primarily for site-wide post backgrounds which can be turned off on individual posts.
Am I missing something?

What I am looking for is to be able to put unique backgrounds on individual posts, eg so one could have a floral background, another a landscape, another a geometric design etc.

Can I do this? How can I do this?

Many thanks to Tom and the knowledgeable crowd that hangs out here. And apologies if I missed something obvious by not RTFM thoroughly enough.

I am using current versions of GP theme and plugin on the current version of WP with no frameworks etc.

[David]

Hi Hakim, yes the customiser settings make global changes to the site.
The easiest method is to use some Tom’s Simple CSS listed here:

https://docs.generatepress.com/article/adding-css/

This will provide a Simple CSS meta box in the post editor, so the CSS only applies to that post. So set the global background image in the customiser and then you can override that on each page. Like so:

body {
background-image: url('my-background.jpg');
}

[Hakim]

Many thanks. Now getting my head around this.
Hakim

[Hakim]

Well, I thought I was getting my head around this …

In the customiser has been added an image for body and content which show on the landing page and individual pages as expected.

However adding the custom css does not help. I have tried:

.body {
background-image: url(‘Rose1280x1080-BG.jpeg’);
}

.body {
background-image: url(‘https://inayatiorderaustralia.org/wp-content/uploads/2018/05/Rose1280x1080-BG.jpeg’);
}

.body {
background-image: url(‘https://inayatiorderaustralia.org/wp-admin/upload.php?item=1681’);
}

The image used in the customiser appears when it is enabled for content but the image wanted for this particular page does not override the other image which is what is wanted.

What am I missing?

With thanks,
Hakim

[Leo]

Try just body instead of .body

[Hakim]

Thanks Leo.

That puts puts the image behind the page while the image set in the customiser remains on the page.
I can work with this short term but would prefer to have the option having unique images behind the text on the individual posts.

Best wishes

[Leo]

Not quite sure if I understand.

Are you hoping to add a unique background image to each block of blog posts?

If so you will have to do them manually for each post. This one would do the first one:

.post-1563 .inside-article {
    background-image: url('https://URL-here')
}

Let me know.

[Hakim]

Works like a dream Leo. Thank you very much.

Hakim

[Leo]

No problem 🙂

[Author]

Posts