• Admin
  • Receive an Update

    You are Here in » » Make Background Image Of Your Blog Clickable With This CSS Tweak





    Make Background Image Of Your Blog Clickable With This CSS Tweak







    UPDATE 



    +Kanyi Okeke alerted me via comments that once you implement it on a Blogger blog, it automatically links anything on the page to the link in the code above.I will find a solution to this and update this post asap.





    Earlier today, +Temi Baby  asked me how to make the background image of her blog clickable and probably link to an external website, while also ensuring that the link opens in a new tab/window. Initially, I thought such won't be possible on a Blogger blog but after making some research, I realized it's possible and can be achieved with css.



    You can see a demo at www.wizkid-download.blogspot.com. Clicking on the background image on desktop and mobile view of the blog takes you to blogger.com + it opens in a new window/tab without taking you away from the blog page.



    So, let me assume you've already added a background image to your blog.



    ==> Log in to www.blogger.com, go to your blog dashboard, click "Templates" > "Edit HTML"



    ==> Click inside the HTML editor, press CTRL F on your keyboard to find < body



    ==> Directly under < body, paste the code below:



    <a href="http://www.nairaforsms.com" id="blogbackground-link" target="_blank"> </a>



    ==> Replace www.nairaforsms.com with the link you want the background to open when clicked.



    ==> Click "Save Template".



    ==> Click inside the HTML editor again and use CTRL F to find ]]></b:skin>



    ==> Paste the css code below, directly above ]]></b:skin>




    #blogbackground-link {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        z-index: 1;

        height: 4000px;

    }



    ==> Click "Save Template".



    View your blog, click on the background image and it should open your link in a new tab/window.



    That's all.



    Don't know how to add background image to your blog?



    Paste the css code below, directly above ]]></b:skin>




    body {

        background-image: url('http://2.bp.blogspot.com/-Rtlf89qVXOM/Uz8h_igoffI/AAAAAAAAJww/hv_6SudT-JE/s1600/Nairaforsms-300x250AD_optim.jpg');   

        background-position: top center;

        z-index: 1;

        background-attachment: scroll;

        background-repeat: repeat-y;

        background-color: grey;

    }



    Carefully replace the highlighted link; http://2.bp.blogspot.com/-Rtlf89qVXOM/Uz8h_igoffI/AAAAAAAAJww/hv_6SudT-JE/s1600/Nairaforsms-300x250AD_optim.jpg with the link to your background image.



    That's all.



    NB: If you are a WordPress user,  copy and paste the code below, directly below the <body tag.



    <a href='http://www.nairaforsms.com' id='blogbackground-link' target='_blank'> </a>



    Thereafter, you can paste the css code in your custom css file.



    ==> Replace nairaforsms.com with the link you want to use



    I hope it works for you. Let me know via comments, if there are challenges.




    More Articles

    ADSENSE SCRIPT HERE

    Make use of Smilleys Codes

    Contact

    Oyo, Nigeria.

    08053151099

    [email protected]

    Mondays to Saturdays 09:00 - 18:00 (GMT +01:00)

    About

    Azeeztech is a Nigerian-based Tech. support platform where anybody can get free solutions to device issues & questions.

    Azeeztech

    Get notified on FB