Filters on a Section Background – Themeco Community

Filters on a Section Background

dabigcheeze — Thu, 25 Jun 2015 21:28:00 +0000

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

Reply To: Filters on a Section Background

Nico — Fri, 26 Jun 2015 00:32:12 +0000

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.

Reply To: Filters on a Section Background

dabigcheeze — Fri, 26 Jun 2015 19:45:46 +0000

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.

Reply To: Filters on a Section Background

Friech — Sat, 27 Jun 2015 01:33:39 +0000

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!

Reply To: Filters on a Section Background

dabigcheeze — Sat, 27 Jun 2015 04:24:57 +0000

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.

Reply To: Filters on a Section Background

Christopher — Sat, 27 Jun 2015 07:59:31 +0000

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.

Reply To: Filters on a Section Background

alistair — Mon, 10 Aug 2015 18:54:10 +0000

Did this work?

Reply To: Filters on a Section Background

Darshana — Mon, 10 Aug 2015 20:31:01 +0000

@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!