Reader: …would you please tell me how ya had those lights up there?

Me: It’s quite simple actually. Just use a bit of CSS code to add a background image to the site. If you already have a background image on your website, then this won’t work well for you.

Steps to take to get Christmas lights on your website like I did:
1) Download or create a nice, repeatable lights graphic. Much like this one.
2) Open the CSS file for your site. If you’re on Blogger, like the reader was, then just go edit your template. The CSS code is all the top of the document within the style tag.
3) Upload the lights graphic to your website, or to a photo sharing service like Flickr.
4) Add this code to your CSS document:
body {
background: #FFFFFF url(http://www.yourwebsite.com/path/to/image/file_name.gif) repeat-x fixed;
}

That’s it. Save your changes, and publish if on Blogger, and your Christmas lights should show up! 🙂

Advertisements