Black Friday Sale! Get up to $30 off GP Premium! Learn more โž

Custom page and post background

Home Forums Support Custom page and post background

Home Forums Support Custom page and post background

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #204474
    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!

    #204506
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #204551
    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 5 years, 5 months ago by Sebas.
    • This reply was modified 5 years, 5 months ago by Sebas.
    • This reply was modified 5 years, 5 months ago by Sebas.
    • This reply was modified 5 years, 5 months ago by Sebas.
    #204562
    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?

    #204620
    Tom
    Lead Developer
    Lead Developer

    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 */
    }
    #204636
    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 :-).

    #204709
    Tom
    Lead Developer
    Lead Developer

    Thanks for the suggestion!

    I don’t see a lot of trends, but will try to keep my eye out ๐Ÿ™‚

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.