Blur a background image via css

<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

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:

Advertisement

Answer