[dabigcheezeParticipant]

Is there any way to create a section using CSS filter so that only the background image is affected? Grayscale, Blur, color overlya, etc.

Thanks

[NicoModerator]

Hi There,

Thanks for writing in.

A little confused with your concern. Would you mind sharing as more details.

We understand is this, you want to add filter on a background image. You can directly add filter using in-line style for section or using your customizer’s custom CSS. For example.

.yoursection {
   background-image: url('yourimage.png');
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

Hope it helps. You can share us your site and the section you want to add filter maybe we could share a CSS to add filter.

Thanks.

[dabigcheezeParticipant]

This is more of a general question at this point. The above code does not work however when I tried it. Cornerstone provides for a background in a section; a color or an image. What I want is to use a background color through Cornerstone and then use some custom CSS to overlay a blurred, partially opaque image. I want to do this using CSS vs uploading separate images with the effects done in Photoshop. This way I can use a single image across the site and keep data loads minimized.

Your supplied code blurs everything in the section, background image, text, etc. I just want the background image affected by the filter.

Please advise.

[FriechModerator]

Hi There,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks!

[dabigcheezeParticipant]

I’m not sure how much clearer I can be. I want to use CSS filters to blur the background image of an x-section without the blur effect affecting everything within the section. The example CSS you provided to me blurs everything within the section, background, text, etc.

[ChristopherModerator]

Hi there,

Please add a class name like my-class to the section where you added background image.

Now please add the following code from Customize -> Custom -> CSS :

.my-class:before {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255,255,255, 0.5);
   content: '';
   display: block;
}

Hope it helps.

[alistairParticipant]

Did this work?

[DarshanaModerator]

@asw

Could you please provide us with your URL to the page that you have tried to implement the above code, so that we can assist you further.

Thanks!

[Author]

Posts