Wallpaper for websites

Here's a quick look about how you can give your site some wallpaper. Whilst you are moving the furniture around there is also some traditional wallpaper design for inspiration.

Adding wallpaper to a site

With a bit of simple CSS you can add wallpaper to a site quickly and easily. Apply a repeating background image to the body of your HTML document and then use a wrapper to put your content on top of the wallpaper. Rather like hanging a picture on a wall.

XHTML

<html>
<head>
    <title>
         Your title here
    </title>  
    <style type="text/css" media="screen">@import "css/screen.css";</style>
</head>
<body>
    <div id="wrapper">         
            <p>Your content here
    </div>
</body>
</html> 

CSS

body
    {
    font: 62.5%/1.5  "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
    background: url(../images/wallpaper.gif) repeat;
    color: #333366;    
    text-align:center;
}

#wrapper
        {
        width:1000px;
        text-align:left;  
        margin-left:auto;
        margin-right:auto;
        background-color: #FFFFFF;
} 

See this code in action in the example

Repeaters and tessellation

CSS can repeat images across a screen, so there is no requirement for a large image. For gradients for example you can use a 1 px wide image and repeat it across the screen using repeat-x. This leads us on to wallpaper design in general and the idea of tessellation.

A tessellation is created when a shape is repeated over and over again covering a plane without any gaps or overlaps. This is great for the web as it means small files can be repeated with no requirement for massive downloads.

Wallpaper design - inspiration from history

Once you understand the idea of tessellation you are really only limited by your imagination. Take the designer William Morris who produced some amazing wallpaper designs.

There is a Morris design in the in the example. Personally I think it looks as good on the web as it does on a wall.

Online there are a number of places for you to find wallpapers for both use and inspiration

Or you could just fire up Photoshop and start creating!

Comments

hot celebrities pictures Feb 27 2008

Read it througly, great tutorial

Free Wallpapers Mar 1 2008

The code is very simple and easy to use. However, it doesn’t look attractive as some of the other sites out there.

horror wallpapers Mar 20 2008

wel the code is reliable and easy to understand and as sad above its being used by many websites.

john May 23 2008

A very good tutorial and well laid out easy to follow CSS. I will give it a try on my personal blog

HD Jul 1 2008

what is the circle wallpaper called
please help

CLyde Aug 4 2008

It’s a good guide but it will increase the load time greatly if we use the whole image, therefore it’s a great guide by explaining to us how to use repeat- .

thanks

sxc Oct 19 2008

wat is da circle wallpaper called

Comments on this post are now closed.

Shape Shed