Recent Posts

header ads

Make Background Image Of Your Blog Clickable With This CSS Tweak


+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 Clicking on the background image on desktop and mobile view of the blog takes you to + 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, 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="" id="blogbackground-link" target="_blank"> </a>

==> Replace 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('');   

    background-position: top center;

    z-index: 1;

    background-attachment: scroll;

    background-repeat: repeat-y;

    background-color: grey;


Carefully replace the highlighted link; 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='' id='blogbackground-link' target='_blank'> </a>

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

==> Replace with the link you want to use

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

Post a Comment