Custom page and post background

[Sebas]

Hi,

I wanted to build a blog, came across GeneratePress and like it very much. I also bought the plugins (Add-ons) because they were unlimited without yearly fees and stuff and I must say: they really make everything a lot nicer!

Despite how far I have come in just half a day, I can’t seem to find how I can use custom backgrounds on posts and pages.

I found https://generatepress.com/forums/topic/background-image-on-only-one-page/ and this works but not in the way the stock function works.

– This is how it works when you add an background image from the options menu: https://sebasveeke.nl/
– This is how it works when you add the custom CSS from Tom’s post in the link: https://sebasveeke.nl/test/

The ‘problem’ is that the background is larger than the text/body. I verified that by also making a page with more text on it, see: https://sebasveeke.nl/test2/ for that.

The background is still visible below the footer. I’m not proficient in CSS so what do I have to add/use in Simple Custom CSS in order to get it to behave like the stock function? Meaning: the background fits within the menu+header and footer and crops if there is not enough content (the rest does move ‘over it’of course).

The second question is: how do I do the same but then for posts (instead of pages)? That does not work with the provides custom CSS 🙂

Thanks in advance!

[Tom]

Hi there,

First of all, there’s an easier way to add CSS for specific pages now, you can use our Simple CSS plugin:

It adds a metabox when you’re editing the page or post where you can enter CSS only for that page/post.

So your CSS would then just be: https://wordpress.org/plugins/simple-css/

body {
   /* CSS in here */
}

Instead of needing to add the page ID.

As the issue, I’m not seeing a difference between:

https://sebasveeke.nl/

And:

https://sebasveeke.nl/test2/

This page looks like that because the content isn’t long enough to push the footer to the bottom of the screen: https://sebasveeke.nl/test/

Let me know 🙂

[Sebas]

Hi Tom,

Thanks for the reply. Really handy that you don’t have to use ID’s anymore! I already use Simple Custom CSS, and I also use the fields in the post. See:

I’m not proficient in CSS so what do I have to add/use in Simple Custom CSS in order to get it

But I don’t know what CSS I need to use in the custom CSS-fields to change the background. Something like background=/webpath/to/picture.extention?

And regarding:

This page looks like that because the content isn’t long enough to push the footer to the bottom of the screen: https://sebasveeke.nl/test/

That is exactly the problem, the ‘test’-page hasn’t enough text in it to push the footer all the way down, so you’ll het this:

http://pasteboard.co/1X7r7udJ.png

This is not the same as with the blog page background-option, which will become very small when there is not enough content. See the following screenshot:

http://pasteboard.co/1X7BwtUF.png

The situations are not the same. The background function provided by the add-on works rather differently than the other backgrounds.

Of course this isn’t a really big deal, I could just add a lot of white space/breaks to small pages to get around this problem. It’s not perfect then but there are worse things ;-).

Do you have the correct custom CSS I can add to the CSS-field in the posts and pages to add a custom background?

Thanks for you quick reply by the way, really appreciate it.

edit: pictures don’t appear so made links of them.

• This reply was modified 7 years, 10 months ago by Sebas.
• This reply was modified 7 years, 10 months ago by Sebas.
• This reply was modified 7 years, 10 months ago by Sebas.
• This reply was modified 7 years, 10 months ago by Sebas.

[Sebas]

After some more trying I think I know why the differences are there. The background add-on has additional options. See:

http://pasteboard.co/1Xbbo2KY.png

So what I am really looking for I guess is the custom CSS-code to add backgrounds to specific pages/posts (via Simple CSS plugin) with options like fixed and no repeat.

You see what I mean?

[Tom]

Right, so the CSS being generated by those options in your screenshot would be:

body {
    background-image: url( 'URL TO YOUR IMAGE' );
    background-size: 100%;
    background-attachment: fixed;
    background-repeat: repeat;
    background-position: 0% 20 /* finish this line with whatever is behind the dropdown in the screenshot */
}

[Sebas]

Thanks! That looks exactly what I am looking for. I’ll try it this afternoon :-).

By the way, it may be handy for CSS-noobs like me (but I have seen a lot more noobs on this supportforum when I searched for this) to make a help-page or examples-page with the 20 most common things to do with custom CSS on GeneratePress. I couldn’t find it at the plugin-page on WP and also not on this website, but maybe I didn’t search well enough.

Just a suggestion :-).

[Tom]

Thanks for the suggestion!

I don’t see a lot of trends, but will try to keep my eye out 🙂

[Author]

Posts