Changing Your Blog’s Background with Custom CSS

March 28, 2008

This is the second post in a two-part series about Custom CSS by TypePad team member Andy Wibbels:

Stylesafter In our previous lesson, we looked at Colin Beavan’s blog No Impact Man and how he used TypePad’s Custom CSS feature to tweak a pre-defined theme with a spankin’ new page banner. In this quick lesson, we’ll see how he changed the background of his blog to add some visual texture.

Reminder: Custom CSS is available to TypePad Pro, Premium and Business Class customers. To access Custom CSS, login to TypePad and go to Weblogs > (Your Weblog) > Design then scroll down and click on Edit Custom CSS.

Taking a look at Colin’s blog you’ll see that the background is a diagonal cross-hatch pattern.

Crosshatch

As mentioned last time, we recommend you use a pre-defined theme as the foundation for your Custom CSS tweaks. For No Impact Man, Colin chose the Hills Green pre-defined theme. Here is how the blog looks, with Hills Green, before any Custom CSS is applied:

Defaultstyles

Notice the light-blue to white gradient that the whole blog sits on top of:

Bluegrad
Here’s the Custom CSS that Colin used to change from the gradient to the diagonal cross-hatch:

body { background-image: url(http://www.missmaryk.com/nimbg3.gif); background-repeat: repeat; }

This tells the browser, Take the graphic nimbg3.gif and use it for the background, repeat it as much as needed to fill up the background. (You’ll often hear this called ‘tiling’ because it is like using the graphic to ‘tile’ across all the available space.)

Your turn: Upload a graphic for your background and then add to your Custom CSS:

body { background-image: url(http://link-to-your-graphic-goes-here.com/filename.gif); background-repeat: repeat; }

If you have a graphic you don't want to have repeated - or tiled - across the screen, simply tell the browser not to repeat it and it will appear just one time, in the upper left:

body { background-image: url("http://link-to-your-graphic-goes-here.com/filename.gif"); background-repeat: no-repeat; }

Save and reload.

Removing Your Custom CSS Styles

To undo any of these tweaks, simply delete that portion of the Custom CSS code, save and reload your blog.

More About CSS

If you want to delve a bit deeper into CSS and TypePad here are a few resources:

For more tutorials on learning CSS:

comments powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.