Thursday, March 1, 2018

Removing the background image from the header of Blogger's Travel theme

This article explains how to remove the semi-transparent image that is shown at the back of the Travel theme (template) provided by Blogger.




I like Blogger's Travel template (now called a theme) - it's clean, and lets me control lots of things. 

But I don't like the semi-transparent image that you can see underneath parts of blog-header, navigation bar and perhaps the post header and body.

By itself, this image looks like this (I suspect it's supposed to be represented a scrunched-up piece of travel diary paper of similar):




Underneath one of my blog's header it's like this - see the lightly shaded area to the left of the red arrow:




Do you see the grey shading? You can possibly ignore it - until you do something like show an ad-unit with a genuine white background in that really shows up the difference. Then it just looks scruffy.

I'm sure that with some major template changes, it could be eliminated altogether - but luckily there's an easier way which just involves replacing it with a transparent image of the same size.   I think that this is a good deal less likely to cause expected problems in some other part of the template, so here's what I do.


How to remove the scrunched grey background from Blogger's Travel theme

Make a new image file, the same size but transparent, to use instead of the current one.
You are welcome to use a copy of mine, which is found at: 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDTtmS35A5mCTGkupa84XHAh0U9v99Eek6fI1A2PHCgtvQ1IrvIzaTf016Yjde72E0mCi7inwWyH10FJw2g1xY0ExDlbEg0JlcbU6GsMbzPfZqkrqddN0P_0zHFy_T557m3DOO3zRqDK6a/s1600/travel-theme-blogger-template-replacement-post-title-background-image-totally-transparent.png

Load this to someplace (I use Google Photos, other people use Imgur or similar)

Get the web-address for your replacement image (this is how I get a picture URL from Photos)

Edit your Blogger theme in the usual way and replace all instances of
https://resources.blogblog.com/blogblog/data/1kt/travel/bg_container.png
with the URL of your own file.


Job done! Your blog will now show your transarent (or whatever) file instead of the dirty-grey half-shadows image that is there by default.





Related Articles

How to edit your theme in Blogger

Getting the URL of a picture from Google Photos

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

No comments:

Post a Comment