Background image clickable

Hey,@tng2013

try to add link as below html.
html

<a href="website.net/link" title="photo">photo</a>

add the below css code in your theme’s customization.
css

.photo {
    background-image: url('https://www.thinksnaps.com/wp-content/uploads/2014/07/images-background.jpg');
    background-size: 300px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    background-clip: border-box;
    transition: background-size 0.2s;
    transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);

    display: block;
    width: 190px;
    height: 190px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-indent: 100%;
    white-space:nowrap;
}

Let me know if that does it.
Thank you.

• This reply was modified 5 years, 7 months ago by AddWeb Solution.

Hi AddWeb,

Unfortunately no luck with that solution. Tried adding the html as the image link and saved the custom CSS but the background was still not clickable and the image didn’t show.

Many thanks for taking the time to reply.

this one a bit tricky, first go to customizer->color->choose any background color, this is to show the container box.

add this to functions.php

function meso_add_bg_ad() {
echo "<div id=\"click-ad-bg\"><a href=\"#\"><img src=\"https://sitename.com/wp-content/uploads/2016/08/img9999.jpg\"/></a></div>";
}
add_action('bp_before_wrapper','meso_add_bg_ad');

replace the link and img serc to your own

add this to custom css

#click-ad-bg {float:left;width:100%;height:100%;overflow:hidden;}
#click-ad-bg img {position:absolute;top:0;left:0;display:block;z-index:10;max-width:100%;heigth:auto;}
#bodycontent #container {z-index:100;position:relative;}

Hi Richie,

Thanks for sending this over. When I tried adding the code to functions.php, it says there is an error with the code and an unexpected > was in the code? Do you have any other ideas?

works fine to me.

try add bottom before ending ?>