Blur a background image via css

Question

<div class=" testingclass wpd-page-title wpd-page-title_horiz_align_left wpd-page-title_vert_align_middle" style="background-color:#ffffff;height:80px;color:#222328;margin-bottom:15px;">
    <div class="wpd-page-title__inner">
        <div class="container">
            <div class="wpd-page-title__content">
                <div class="page_title">
                    <h1>Multilingual Digital Marketing</h1>
                                        </div>
                                                    </div>

        </div>
    </div>    
</div>

CSS for these are

body.term-107 .wpd-page-title {
background: url(https://khaleejdev.com/kds/newtornetto/wp- 
content/uploads/2018/05/107.jpg)no-repeat;
background-size: 100%;
}

I want to make the below Header background image blur as below of this page.

https://khaleejdev.com/kds/newtornetto/product-category/multilingual-digital-marketing/

Please help me achieve it without affecting title. I tried all the previous answers of Stackoverflow but it didn't worked.

Actually i have a bunch of php code for wordpress product archive template, if html can adjusted to attain the feature i want without affecting current layout as shown in url https://khaleejdev.com/kds/newtornetto/product-category/multilingual-digital-marketing/ .

Please check the image , i want blur affect on image only, not on title.

It would be great.

Here is the php code

<div class=" testingclass wpd-page-title<?php echo !empty($page_title_classes) ? esc_attr($page_title_classes) : ''; ?>"<?php echo !empty($page_title_styles) ? ' style="'.esc_attr($page_title_styles).'"' : '' ?>>
    <div class='wpd-page-title__inner'>
        <div class='container'>
            <div class='wpd-page-title__content'>
                <div class='page_title content'>
                    <h1><?php echo esc_html($wpd_page_title); ?></h1>
                    <?php if(!empty($page_sub_title) && $page_title_horiz_align != 'center'): ?>
                        <div class='page_sub_title'><div><?php echo esc_attr( $page_sub_title ); ?></div></div>
                    <?php endif; ?>
                </div>
                <?php if (!empty($page_sub_title) && $page_title_horiz_align == 'center'): ?>
                    <div class='page_sub_title'><div><?php echo esc_attr( $page_sub_title ); ?></div></div>
                <?php endif; ?>
                <?php if ($page_title_breadcrumbs_conditional == 'yes'): ?>
                    <div class='wpd_breadcrumb'><?php 
                        /** Breadcrumb Template */
                        get_template_part( 'template-parts/header/partials/breadcrumb' ); 
                    ?></div>
                <?php endif; ?>
            </div>

        </div>
    </div>    
</div>

I tried all the previous answers of Stackoverflow but it didn't worked. Please don't mark this question as duplicate. — Nimesh, Jun 10 '18 at 18:02
@Mr.Alien Have you really tried my code in question?, I have asked question with my code, not your code. Please try to achieve it with my code. — Nimesh, Jun 10 '18 at 18:29
Not trying but re-opening as you are emphasizing that the old answers do not work for you. — Mr. Alien, Jun 10 '18 at 18:30
@Nimesh Because your text is inside a div nested inside the div with the background image, if you apply a blur to one div, all the other divs nested inside it will also be affected. — Jos van Weesel, Jun 10 '18 at 18:46

score 2 · Accepted Answer · edited Apr 09 '20 at 14:19

2

You can use the following CSS declaration to blur a background image:

filter: blur(value);

N.B. If you want the <div> to contain other content but you wish to blur only the background image, then apply the background image and the blur to a ::before pseudo-element.

Working Example:

.wpd-page-title {
position: relative;
width: 100%;
height: 180px;
}

.wpd-page-title::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://picsum.photos/300/300) no-repeat;
}


.blur-3px::before {
filter: blur(3px);
}

.blur-6px::before {
filter: blur(6px);
}

.blur-9px::before {
filter: blur(9px);
}

<div class="wpd-page-title"></div>
<div class="wpd-page-title blur-3px"></div>
<div class="wpd-page-title blur-6px"></div>
<div class="wpd-page-title blur-9px"></div>

Read More on CSS Filters:

edited Apr 09 '20 at 14:19

PJunior

2,649
1
33
29

answered Jun 10 '18 at 18:41

Rounin

27,134
9
83
108

Not a sufficient answer to his question. It's not his full code. He has nested divs inside with text, and even like this the text will still be affected by the blur too. – Jos van Weesel Jun 10 '18 at 18:45
Fair enough. I've edited the answer above to demonstrate how the background image and the blur filter can be applied to a `::before` pseudo-element, leaving the remainder of the content unaltered. – Rounin Jun 10 '18 at 18:52
I have to do it with current code, isn't it possible? – Nimesh Jun 10 '18 at 19:07
@Rounin and SirExotic I have updated my question with some more help. Is this achievable? – Nimesh Jun 10 '18 at 19:18

score 0 · Answer 2 · answered Jun 12 '18 at 09:47

You have two options,

You can take out the "title" from the background parent div and use position absolute property to align it on the background image and apply blur code for the parent div

 .testingclass{
 filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}

like following

<div class=" testingclass wpd-page-title wpd-page-title_horiz_align_left wpd-page-title_vert_align_middle" style="background-color:#ffffff;height:80px;color:#222328;margin-bottom:15px;">

  </div>
 <div class="wpd-page-title__inner">
    <div class="container">
        <div class="wpd-page-title__content">
            <div class="page_title">
                <h1>Multilingual Digital Marketing</h1>
                                    </div>
                                                </div>

    </div>
</div>

Use PSD to make the image Blur, because you cant control the blurred effect to inside elements if you apply blur or opacity to parent

You can notice that, the blur affect is working for the 3 image grid section, because the image and text are separated, and you are using position: absolute for the text div.

Blur a background image via css

2 Answers2

Related