[Resolved] Using a Scrim to get readable white text over background image

[CJ]

Hi, I am using a block element for the hero on my main page and I’ve successfully set it up have a custom background image with text on it. However, I’d like the text to be white and use a ‘responsive scrim’ to make it readable. This is example code that I’d like to use- https://codepen.io/travishorn/pen/pZpaeE .

I don’t know how to add the above kind of CSS code so it can target the page hero block element and do this effect to make the text readable.

Thanks,

[Leo]

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[CJ]

Hi. I attached the link to the development site. Right now I used ‘highlight’ text and put the text over a white area of the picture but ideally I’d like to use the responsive scrim code idea to have just white text (without highlight) over any part of background image and make it readable. Hope that make sense.

[Leo]

I’m still not 100% sure what you are looking for but have you tried adding a background color to this container?
https://www.screencast.com/t/eqYTcke7Zzkk
https://docs.generateblocks.com/article/container-overview/#colors

[CJ]

Hi, thanks. Yeah that’s a possibility but I’d like to have no background color for the text so it’s just white text color and can go anywhere over my background image. This is another site that explains the same thing of what I’m looking for- https://travishorn.com/responsive-scrim-6f286da5b6a5.
This kind of example code to make the white text readable on a background image-

body {
  font-size: 30px;
  font-family: 'Lato', sans-serif;
  color: #FFFFFF;
}

.container { padding: 0 3rem; }

.panel {
  padding: 4rem;
  margin: 4rem 0;
  background-position: center;
  background-size: cover;
}

.scrim {
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .2);
  box-shadow: 0 0 5rem rgba(0, 0, 0, .5);
}

.panel-tiger { background-image: url(https://images.unsplash.com/photo-1532898497155-80c9ac67d3f9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=be57b384516ad8b86ef1444762f11c72&auto=format&fit=crop&w=2090&q=80); }

Is that possible at all to add to the site’s custom CSS somehow?

[Ying]

You can add an addtional CSS to the headline block, eg. scrim.
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Then add this CSS:

.gb-headline.scrim {
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .2);
  box-shadow: 0 0 5rem rgba(0, 0, 0, .5);
}

[CJ]

Great. Thank you all for your help!

[Ying]

No Problem, glad to help 🙂

[Author]

Posts