Thread Starter
rod
(@nomadarod)
I discovered that the “cover” block can be used as a background that covers the entire body of the page. But it didn’t allow me to stretch a group block inside it to the full width of the page, like a banner, because the cover block has an inner-container, besides having padding.
So I applied this in the aditional css section of the customiser:
.wp-block-cover .wp-block-cover__inner-container {
width: 100%;
}
.wp-block-cover {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
and it worked. But I do not wish to apply it to all cover blocks of all pages of the website, and I am guessing that that’s what this code does. Right?
So I added a class to the cover block called “page-banner”, and added that to the code, like this:
.page-banner .wp-block-cover .wp-block-cover__inner-container {
width: 100%;
}
.page-banner .wp-block-cover {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
but now it doesn’t work. What am I doing wrong?
the page in question
-
This reply was modified 5 years, 5 months ago by
rod.
Ah, I can help with that 🙂
You have a space inbetween .page-banner and .wp-block-cover. So use this CSS instead …
.page-banner.wp-block-cover .wp-block-cover__inner-container {
width: 100%;
}
.page-banner.wp-block-cover {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
This won’t show the background image behind the site header, however.
Oliver
Thread Starter
rod
(@nomadarod)
Thanks Oliver! It worked like a charm! 😉
I need to put myself in css school again.
Thread Starter
rod
(@nomadarod)
@domainsupport Sorry I missed your question on the top.
What if the default background image set in “Customizer – Background Image” was replaced by the featured image on all pages / posts that had a featured image? Otherwise archive pages, etc that don’t have featured images would still show the default background image?
Yeah, that would do it for what I wish to do. Maybe that plugin already has some of the stuff I am trying to figure out. I’ll install it.
This won’t show the background image behind the site header, however.
I would like it to show all the way down including the footer, in a way that I could make the footer transparent so the footer would be a continuing of the page cover.
I will also try to find a way to change the opacity/transparency of that .page-banner that you helped me make full width on top of the page cover. I have no idea how to do these degrees of “transparency” but I imagine that everything is possible 😀
OK, cool, we’ll get to work on the “featured image as background image” solution and let you know when this is ready.
If you want to add a translucent layer to the .page-banner cover block, I’m pretty sure this can be done with a bit of CSS like …
.page-banner.wp-block-cover .wp-block-cover__inner-container::before {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
color: #693b58;
opacity: 0.7;
}
Let me know if that works (I’ve not actually tested it, sorry!).
Oliver
Thread Starter
rod
(@nomadarod)
Thanks Oliver!
And thanks for the code! I applied it to the yellow banner instead, just added the opacity parameter to a new class, and it worked! weird feeling of “I can do everything I want!!” 😀
