[Resolved] get .sidebar bg img to extent to footer

Home Forums Support [Resolved] get .sidebar bg img to extent to footer

Home Forums Support get .sidebar bg img to extent to footer

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1093751


    Probably purely a CSS question – but I’m still not 100% familiar with how GPP constructs things.

    I’m trying to replicate a design originally done on a non-responsive theme (it used a full repeated y background img on what would be the equivalent of the .content div in GPP) but I now need to split it into two bg imgs so part appears in the #primary and the other appears in the .sidebar (not the widgets, but entire sidebar), so that in smaller screens the bg appears correct in both.

    I have used:

     #right-sidebar.sidebar {
        background-image: url(sidebar-bg.png);
        background-repeat: repeat-y;
        background-position: top left;
    #primary {
    background-image: url(body-bg.png);
        background-repeat: repeat-y;
        background-position: top right;

    and it comes close to what I need – but since the #primary content is longer than the .sidebar content, the sidebar bg img does not extend to the footer

    see: https://postimg.cc/5Q8J0KG9

    is there a way to force this .sidebar bg to meet the footer?

    – thanks kathy

    Customer Support

    Hi there,

    Try this CSS:

    @media (min-width: 769px) {
        .site-content {
            display: flex;

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

    Let me know if this helps ๐Ÿ™‚


    Wow thank you!
    I’m very unfamiliar with the flexbox model – Could I trouble you for just a short explanation why this works? Am I endangering any other elements using this as is?
    Off to read up on this now.
    Thanks so much!
    – k

    Customer Support

    This is a good tutorial:

    Flexbox is super awesome ๐Ÿ™‚

    Shouldn’t cause other issues.

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