Thursday, March 8, 2012

Scaling Background Image On Blogger

With a little work, I got my background image to remain static when zooming. Here’s what happened.

Today I was mucking around with the width settings for my blog because some embedded code I wanted to use required a minimum width in order to display properly, and I noticed that when I zoom out the background on my blog decreases in size. Since I usually am zooming in to make text larger on my large, widescreen monitor, I hadn’t noticed this before, but anyone who zooms out will notice it, and it looks pretty unprofessional.

Pictured: Amateur Hour

“This needs fixed!” I declared, voicing my resolve with an appropriately grammar deficient statement. So I set out on a quest to find some other poor soul on the internet who had found a solution to my problem. Fortunately, this was a quick journey, as I ended up here, where they had a quick and effective solution.

The problem is that the CSS used by Blogger is, by default, configured to display background images as a single image, at the top and center of the screen. CSS-Tricks offered some simple code that you can insert into your blog to fix the problem, but the problem is figuring out where to put it.
Now, I don’t mess around in the HTML code for my blog very much, primarily because it’s an nearly unreadable mess of confusing code in there. Blogger generated it, and it works, so I guess that’s what matters, but manual editing is extremely difficult (and actually a little dangerous to your layout) unless you know exactly what you’re doing.

So, CSS-Tricks recommended that you insert the code from their website into the CSS portion of your code. If you’re not familiar with what CSS means, it’s near the top of the file, and it controls layouts, font sizes, themes, and so on. To edit it, here’s what you need to do:
  1. Open up the “Template” editor on your blog. It should look like this:
    An inside look at what I see when I blog
  2. Click on the “Edit HTML” button just underneath the “Live on Blog” picture.
  3. It’ll pop up with a  scary warning that says you can get into all sorts of trouble by editing the HTML. Dismiss it by hitting the “Proceed” button on the left.
  4. Try not to have a heart attack when you see what your blog looks like on the inside.
  5. Now it’s time to find the area where the code goes. Click inside the box with all the code, and do a search (CTRL+F) for “body.background” without the quotes. This is the name that Blogger uses for the background image. Cycle through the results until you find something like this (results will vary, depending on how you’ve configured your page):
    Raw code is terrifying... unless you're hardcore.
  6. This is where you will insert the code from CSS-Tricks. The end result should look like this.
    It helps to understand what all this stuff does.
Once you’ve done that, save the code (you can hit the “Preview” button if you’re worried it won’t work), and your background image on your blog should be fixed.

Now it looks like it should.

Do you have any to make your blog work better or display more appropriately?


  1. I think I'm going to have to kiss you. Worked like a charm.

  2. Thank you so much! I was finding it near impossible to interpret the huge amount of html, but this guide just made my day!