How to Set a Background Image with Dynamic Views (Technical Tuesday)

I figured out how to jump Hurdle #1 in my continuing journey to use Blogger's new Dynamic Views. If you remember, I wanted a way to make it more my own and not just black and white.

While the new views are cool, they don't have near the customization available to the normal templates.

I first tried to use my old background, but it didn't work at all. It was too big and didn't look right in all the different views. One thing I've had to get used to is that my readers can choose any of the views they want, so I have to test my customization using all of them. It's not hard to do, but it's something you need to remember.

I experimented with several options to get my background working, but ended up choosing a simple one: I cropped the image.

1. Crop or re-size your background image to be 65 pixels high and as wide as you need. Mine is 1600 pixels wide.
2. Login to your Blogger Dashboard -> Templates.
3. Click the "Customize" button below the "Live on Blog" template, and the Blog Template Designer will open.
4. Select Background then click on the down-arrow next to the current background image.
   
   
5. Upload your newly-cropped image.
6. Choose the alignment that works best. You can see the results in the preview pane.
7. Select "Don't tile".
8. Apply the changes to your blog.

My image looked great, but I couldn't read my blog title because it was the wrong color. There isn't a simple way to do this, so I had to use the Advanced settings.

1. Login to your Blogger Dashboard -> Templates.
2. Click the "Customize" button below the "Live on Blog" template, and the Blog Template Designer will open.
3. Select Advanced then enter the following code into the Add CSS field.
   
   #header .header-bar .title h1 { color: white; } 
   
   Change the color to whatever you need. You can either use a color name like I did ("white"), or specify the color using RGB or hexadecimal. If I just lost you, don't worry, there's more details on each option and and examples below.
4. Apply the changes to your blog.

HTML Color Names

The list of accepted names can be found in many places online. I prefer to use W3Schools.com. They not only have great information, but they also have many tutorials that teach different web technologies.

List of HTML Color Names

RGB and Hexadecimal Colors

You can also specify colors by RGB values. To do this, use the following code:

#header .header-bar .title h1 { color: RGB(256,256,256); }

Or you can specify using the color's hexadecimal value. It looks like this:

#header .header-bar .title h1 { color: #FFFFFF; }

These codes can usually be found in an image editor or color picker. A decent place to get these codes is using the HTML Color Mixer page.

I'm going to work on a couple more hurdles this week. If you find this information useful let me know.

* Don't stare at the picture for too long, you might go cross-eyed. It's mesmerizing though. The image was created by fdecomite and can be found on Flickr.