How can I put blur on the image?

[newcoder1010]

Hi,

I have an image. I am trying to apply blur feature on the image. Blur color can be anything. I also should be able to apply percentage of the color(brightness/contrast/etc.).

I checked out the page but did not see anything with color. How can I do it?

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_filter_all

Thanks

[dsonesuk]

What if you place image in div, give div background color/s (gradient), then use opacity and blur for image.

[newcoder1010]

This is a complicated answer. Would that possible if you could provide html with css? Thanks.

[dsonesuk]

What image in div, div with background-color, image with opacity and blur? how difficult can that be?

[newcoder1010]

<div class="test"> 

<img src="test.png"></div>

 

.test {
 background-color: red;
}

img {
    opacity: .5;
    filter: blur(3px);
}

 

Above works. Problem starts when I have background image for a div class. Then blurring the image does not work. 

.test {
    background-image: url("/sites/default/files/FortuneTeam-bg.png");
    background-color: red;}

 

[dsonesuk]

What css styling does the img element have, that the div using background image instead does not! Now think about it, also div with no dimensions means height 0, no height, no background image to see.

[newcoder1010]

Sorry, I am not able to follow you. My requirement is to have background image of test class then blur the image with a color. Are you asking me to set test class to no height, no bg color, etc. But I do need the bg image. 

[dsonesuk]

No! the opposite, with a image (img) element within a div, the height of the div is determined by the height of image,. By removing img element and using background image for div, there is nothing to give it height, so it will collapse to zero height, meaning the background-image will not show because the height is zero, given the div a height means the image is able to show itself.

You either need a div to have background image and a child element OR content: property using : after or :before to have background colour or vice versa, with whatever has background image using filter: blur() and maybe opacity.

[newcoder1010]

I read your answer multiple times but I could not understand completely. Below is what I tried. 

<div class="test"> 

<p> my paragraph </p>

</div>


.test {
    background-image: url(/sites/default/files/Fortune.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 100%;
    padding: 100px 15% 100px 15%;
}

.test::after {
    text-align: center;
    color: #221301;
    background-color: red;
    filter: blur(3px);
    opacity: .5;
}

I see the background image and then the paragraph on top. But I expected the background image to have red color with blur and opacity and I did not see it. Please advise. 

[dsonesuk]

You have not use content: property to create a sort of textual element which you can style as you would any other element, such as assigning a background-image to it.

https://www.w3schools.com/code/tryit.asp?filename=FKQ6I0XUJ7BR

[newcoder1010]

Thank you much. This is exactly what I needed. 

[dsonesuk]

Note: MS Internet Explorer and Edge browsers are 5 years behind other better browsers, you might want to consider alternative with  svg instead, I had the same problem a few months ago, though i can't remember where I got solution from. try google: alternative to css3 blur Internet explorer

[newcoder1010]

Sure I will do that. 

[codeminer]

/*this will give you blurred  border around your div which overlapse your photo dont know if this helps not the best solution but it works*/

body{
    background-image: url( "YOUR PHOTO HEREj.jpg");
    background-repeat:no-repeat;
    background-color: #fff000;
    background-size: 100% 100vh ;
    opacity: 1;
    border:1px #000;
    border-radius:12px;
    
      box-shadow:10px 10px 50px 20px #AAAAFF inset; 
    
    }