background image for each page

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 3 years, 11 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

Thanks Oliver! It worked like a charm! ??

I need to put myself in css school again.

Haha! Glad it worked.

@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

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!!” ??

Nice one! ??