Background image clickable

Resolved CB
(@tng2013)

7 years, 2 months ago

Hi Richie,

Do you know how to make the background image clickable? We would like to use this space for advertising, so it would be great if we could make it so the background image sends users through to an external website in a new tab when clicked.

Thanks for the theme and all the support.

Viewing 5 replies - 1 through 5 (of 5 total)

AddWeb Solution
(@addweb-solution-pvt-ltd)

7 years, 2 months ago
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('http://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 7 years, 2 months ago by AddWeb Solution.
Thread Starter CB
(@tng2013)

7 years, 2 months ago

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.
Theme Author Richie KS
(@rkcorp)

7 years, 1 month ago
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=\"http://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;}
```
Thread Starter CB
(@tng2013)

7 years, 1 month ago

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?

Theme Author Richie KS
(@rkcorp)

7 years, 1 month ago

works fine to me.

try add bottom before ending ?>