Archived topic
get .sidebar bg img to extent to footer
3 replies · Started by Kathy on December 4, 2019
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
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
This is a good tutorial:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox is super awesome :)
Shouldn't cause other issues.
