Activity

Hi,

I’m trying to blur half/part of the “bb-cover-photo” (BuddyPress User background image).
So idea wise like this: http://jsfiddle.net/Lmccn0vw/2/

In member-header.php my code is this:
[...]
<?php do_action( 'bp_before_member_header' ); ?>

<?php
//output cover photo.
echo buddyboss_cover_photo("user",bp_displayed_user_id());
?>

<div class="outerblur">
<div class="testblur">
<?php
//output cover photo.
echo buddyboss_cover_photo("user",bp_displayed_user_id());
?>
</div>
</div>

<div id="item-header-cover" class="table">

[...]

The CSS like this (already messed up by playing around):

.outerblur {
float: right;
width: 400px;
}

.testblur .bb-cover-photo {
overflow: hidden;
}
.testblur .bb-cover-photo div.holder {
background-position: center right !important;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
filter: blur(5px);
height: 100%;
right: 2px;
float: right;
position: absolute;
}

My problem is, that the blured background won’t align to “background-position: center right;“. It stays aligned to “center left”.

Also echo buddyboss_cover_photo("user",bp_displayed_user_id()); Causes that I now have two “Update Cover Photo”-icons/buttons. Do I just have to echo another “shortcode” for the cover photo?

Any ideas?
Thanks!