Blur background image without blurring content

I am trying to add blur filters to the background image. here’s my code

CSS:

.intro {
  --background: url(https://source.unsplash.com/random/?friends) no-repeat
    center center;
  --background-size: cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.bg-image {
  background-image: var(--background);
  filter: blur(8px);
  -webkit-filter: blur(8px);
  -o-filter: blur(8px);
  -moz-filter: blur(8px);
}

React Component:

      <IonPage>
        <IonContent className="intro">
          // I tried to position this div outside the page but has no effect
         <div className="bg-image" />

Now, I tried defining the --background variable but it doesnt seem to work and doesnt display any image . I could only use the variable inside of IonContent So, When i tried to apply blur filters inside of intro class which is associated with IonContent it ends up blurring the whole screen every element inside Ion content. My only option was to seperate out blur filters into div like its suggested in few other related questions but it has no effect. I’ll appreciate some help figuring this out

1 post - 1 participant

Read full topic