Background Christmas Lights

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! :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Notify me of followup comments via e-mail. You can also subscribe without commenting.