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>

Answer 1

You have two options,

1. 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>   
   

2. 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.

Answer 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(http://khaleejdev.com/kds/newtornetto/wp-content/uploads/2018/05/107.jpg) 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:

• https://css-tricks.com/almanac/properties/f/filter/
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter
• https://www.sitepoint.com/css-filter-effects-blur-grayscale-brightness-and-more-in-css/