css – My Brain BLOG

How to change background-image opacity in CSS without affecting the text

Thank you so much for your quick solution… coder-coder.com

copy-paste

When building a website, you may often want to put a background image on an HTML <div> that also contains text or other content.

And to make the text stand out, you want to change the opacity of that background image in CSS so that it’s semi-transparent. But you’ve tried, and you can’t change the opacity of the background image without also affecting the text or other child elements!

What can you do? Not to worry– this article will give you some practical solutions to controlling your background image opacity.

So, first, the bad news…

Break-inside: avoid

Remember… (see source)
When using the following in CSS:

   break-inside: avoid;

also add to the same item:

   overflow: hidden;

Otherwise Firefox will give you a headache.
Have a nice day 🙂

CSS Stylesheet selectors

Selectors are one of, if not, the most important parts of CSS. They shape the cascade and determine how styles are to be applied to elements on a page.