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

[Kathy]

Hi!

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

[Leo]

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 🙂

[Kathy]

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

[Leo]

This is a good tutorial:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox is super awesome 🙂

Shouldn’t cause other issues.

[Author]

Posts