How to place a pattern as your website background

February 10th, 2010

How to place a pattern as your website background

caption

Using a pattern for your website background is a great idea, especially if your website needs a little something to jazz it up. There are many perks to using a patterned background on your website. Not only is it bandwidth friendly, but it also provides a finishing touch to a website that may otherwise have very little going on. Patterns can be subtle or bold, whichever suits your personal preference. The first thing you have to do is find (or create) a pattern that you like.

There are many great websites out there that offer free background patterns for use on websites.

In this demo, we will use the following image as our background pattern, courtesy of squidfingers.com:

website background pattern
   pattern.gif

  1. Add the image called pattern.gif to the same folder that contains your HTML file (or put them both on your dektop).
  2. Open your HTML file. To place the image as your background, add the following style to the <body> tag:

    style=”background-image:url(pattern.gif); background-repeat:repeat”

    … so that your complete code looks like this:

    <!DOCTYPE html>
    <html>
    <head>
    <title>How to place a pattern as your website background</title>
    </head>
    <body style=”background-image:url(pattern.gif); background-repeat:repeat”>
    </body>
    </html>

  3. In a browser, your website background should now look like this:

    background pattern
  4. When you’re done, move the style out of the <body> tag and into a stylesheet, so that you can update it with ease in the future. That’s it, you’re done.


comments...

  1. Hi,

    I have been trying without success to add a patterned/ textured background to my website. I have downloaded a free background (jpg file). I am using KompoZer to design and manage my website and I followed your instructions exactly. No image shows up at all! I can’t figure out what I’m doing wrong. Any suggestions?
    Thank you, in advance for any help you can give me.



leave a comment...



Category: All Categories, CSS Follow any responses to this post through the RSS 2.0 feed or trackback from your own site.

Tags: , , , , ,