CSS Google

How to prevent your Google background image from fading in slowly.

Google + slow loading = not worth having background images.

In trying to keep their homepage as minimal as possible, in December Google switched to fading in the home page links only on an event: moving your mouse or tabbing out of the search box. This was fine when the home page was only white, as it wasn’t taxing on computers to fade in on white.

Now that Google allows for custom image backgrounds (likely in response to how beautiful the Bing backgrounds are), the fading in process can be tedious, even using blazing-fast Chrome. I can only imagine what users using Internet Explorer 6 are going through: fading in images takes a lot of work and time!

This was annoying me, so I made a quick modification to my SEO Stylesheet (a Custom Stylesheet to display search results and no-follow nicely in Safari, IE and Firefox). This mod will make the image load solid, with no fading or resulting lag.

Add to your User Stylesheet CSS file:

#fpdi,#cpBackgroundImg { opacity: 1.0!important; }

Once the image loads, it will be displayed as solid, and Google will be fast-loading again.

For more information on user stylesheets, check out the SEO Stylesheets post.

To prevent the home page links from being hidden…

If you want to prevent the new “fade-in” look, use the following code in your user stylesheet instead:

#ghead *, span#footer center#fctr, #fpdi,#cpBackgroundImg { opacity: 1.0!important; }


I realized that when logged out and logged in, Google changes the ID of the background image. I’ve updated to code from #cpBackgroundImg to #fpdi,#cpBackgroundImg to reflect that.

By Zack Katz

Zack Katz is the founder of GravityKit and TrustedLogin. He lives in Leverett, Massachusetts with his wife Juniper.

5 replies on “How to prevent your Google background image from fading in slowly.”

Hi Owen, if you are logged out, Google uses #fpdi, and if you’re logged in, the id is #cpBackgroundImg…switch out #cpBackgroundImg { for #fpdi,#cpBackgroundImg { and it’ll work again. Thanks for commenting; I’ve updated the post as well.

No sorry it didn’t work for me. I pasted that code into a new userContent.css aswell as the template given but neither worked. Is it formatted correctly and is there anything I need to do specifically? It might be easier to upload yours since we know that one works 🙂

Ignore that I got it to work now, thanks :). Theres a bit of a delay but it’s better than lagging up the whole of google. That was awful.

Nice one. This was really starting to get on my nerves especially since I have an add-on to open Google when I create a new tab. Nice and quick again.

Comments are closed.