Support » Theme: MesoColumn » Background image clickable

  • 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 Pvt. Ltd.

    (@addweb-solution-pvt-ltd)

    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.

    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)

    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;}
    CB

    (@tng2013)

    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)

    works fine to me.

    try add bottom before ending ?>

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.