Add filter to .bottom-header background attachment + image

Hello,

I’d like to add a filter to the .bottom-header background attachment on my website. Would you be able to provide a CSS snippet?

Website: danedits.co.uk
Pass: HolioTen

Example of the kind of effect I am wanting to apply…

img {
filter: grayscale(100%);
}

I would like to target the .bototm header attachment specifically - whether it is displaying a video, slider or image. In my case the .bottom-header is displaying a video.

Dan

Hey there

I think your question needs refinement, you don’t have any image in that section, its a video, what exactly you mean?

Sorry if there is any confusion. I have three separate questions. The first one applies to my website directly, the other two are hypothetical.

  1. Is it possible to add a filter to the .bottom-header background video using CSS styling? My knowledge of CSS terminology is limited. I was referring to the .bottom-header video as a ‘background attachment’ though this term may be incorrect.

  2. Hypothetically, if my .bottom-header background was an image what CSS styling would I use to apply a filter to this?

  3. Hypothetically, if my .bottom-header background was a slider what CSS styling would I use to apply a filter to this?

The type of effect I am wanting to apply is…

CSS IDENTIFIER(S) {
ilter: grayscale(100%);
}

hey there

CSS filter can be applied to the images but not with the videos,
right now you have the only video and I can’t generate any CSS for if, if you change it to the image then yes

Thanks for the heads up! I’ll apply all future filters to my videos prior to upload.

If it’s ok I’d rather avoid altering my website. Would it be possible for you to provide the general CSS identifiers used to add a filter to the .bottom-header background image of the illdy theme?

In other words, below is a link to the illdy demo theme. If I were to add a filter to the background image used in the illdy demo theme could you outline the CSS I would use? I will adapt the CSS you provide to suit my own website.

https://demo.colorlib.com/illdy/

Dan

Dan

Hi Dan

Sorry, but its a background image and looks like its not possible to add a filter when image is applied as a background image, instead of dealing with this simple style your image in image editor, add any filter you want, and then use it on the website :slight_smile:

SOLVED!

Thanks in the future I will apply image filter in photoshop before uploading them.

Dan

Glad to hear :slight_smile:

Case closed