background image greyscale filter while foreground is still in colour

i had an issue the other day using a css filter which was causing all items within the element to also have that filter.

using the ::before psudo class solves this issue

HTML

<div class='demo-bg flex-center'>
  <div class='demo-bg-inner'>some inner text</div>
</div>

CSS

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.demo-bg {
  position: relative;
  width:100%;
  height:400px;  
}
.demo-bg::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background-image: url(https://kruxor.com/images/pexels-photo-546819.jpeg);
  filter: grayscale(100%);
}
.demo-bg-inner {
  position: relative;
  color:red;
  font-size:32px;
  font-weight:bold;
}
some inner text

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 192 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
Be Yourself, Back Yourself
Kristie Bennett, Survivor