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.
“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:
- Open up the “Template” editor on your blog. It should look like this:
- Click on the “Edit HTML” button just underneath the “Live on Blog” picture.
- 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.
- Try not to have a heart attack when you see what your blog looks like on the inside.
- 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):
- This is where you will insert the code from CSS-Tricks. The end result should look like this.
Do you have any to make your blog work better or display more appropriately?