<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>
Advertisement
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: