shapeshed

Ruby & JavaScript Hacker

Wallpaper for Websites

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

1
2
3
4
5
6
7
8
9
10
11
12
13

<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

William Morris Wallpaper

William Morris Wallpaper

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!