Jump to content
newcoder1010

How can I put blur on the image?

Recommended Posts

<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;}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

/*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; 
    
    }

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×