Make Background Image Of Your Blog Clickable With This CSS Tweak


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.instanaija.com" id="blogbackground-link" target="_blank"> </a>

==> Replace www.instanaija.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUVmGMdDwVbiOIQvF2RMK5GqYRXjamn_5DHKOVpSNbhATw_PzOaBMSlq-9SWfl1_qcK84Pry5Iyv0XC7fVCGsbG59Wlg4J-g4mDeW7uP9cMD-u5zhnvIvpUngLm5OIWrv55w9w-2H7M9E-/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; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUVmGMdDwVbiOIQvF2RMK5GqYRXjamn_5DHKOVpSNbhATw_PzOaBMSlq-9SWfl1_qcK84Pry5Iyv0XC7fVCGsbG59Wlg4J-g4mDeW7uP9cMD-u5zhnvIvpUngLm5OIWrv55w9w-2H7M9E-/s1600/Nairaforsms-300x250AD_optim.jpg with the link to your background image.

That's all.

NB: If you are a wordpress user, you can get the < body tag via "Appearance" > "Editor" > Header.php. Thereafter, you can paste the css code in your custom css file.

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

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.