Remember to backgroundify your <body> elements

Some browsers allow you to change the base background color and text color in their settings. This means you have to give a basic background and text color to your <body> elements in order to prevent accidents from happening.

Today I was in trouble. My girlfriend had turned the user setting of the page background to black on her Opera. This she did to “save energy”, which sounds a bit trivial to me, as she has a small LCD.

Anyway, I tried to open a page, but I didn’t see anything but blue links and a few images. I wondered what was going on, but realized that it must be the black background doing its tricks here. I didn’t know where or how it could be set to white again, so I took a deep breath and opened the page in Internet Explorer. It loaded fine and everything was viewable again.

So this is a word of advice to all CSS coders: remember to give a background color and a base text color to your <body> elements:

body {
          background: #FFF;
          color: #000;
     }

Now user settings will be over-written and texts are readable with some basic CSS and you can override these styles later on in your CSS files.

I also told my girlfriend to change the black background to a dark gray. It’s still dark but I don’t need to open IE if an <body> accident has happened.

Leave a Reply

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>