Posted by Patternhead on August 13, 2007.
Seamless patterns and CSS. It’s a match made in heaven.
This article is going to show you how easy it is to add repeat patterns to your CSS based web designs.
Ok, the first thing we need is some HTML.
Copy this code, paste it into your favorite text editor and save it as index.html :
<html>
<head>
<title>Fun and games with wallpaper</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
</head>
<body>
<div id="container">
<p>Dontcha just love those seamless patterns :)</p>
</div>
</body>
</html>
Then we need a bit of CSS.
Copy this code, paste it into your favorite text editor and save it as stylesheet.css. Make sure you save it to the same folder as the HTML file you saved above:
body { font: small Verdana, Arial, sans-serif; background: url(wallpaper1.jpg); color:#333; text-align:center; }#container { background:#fff; width:700px; margin:0 auto; padding:5em 0; }
Now, right click the image below and save it to the same folder as index.html and stylesheet.css. Make sure you save the file as wallpaper1.jpg
Now just open index.html in your browser and you should be able to see that the seamless pattern has filled the whole of the background. That’s all there is to it!
For those that don’t like to cut and paste, here’s a zip file that you can download. It contains all the files in this tutorial. Just unzip it to a folder on your hard drive and open index.html in your browser.
Copyright © 2008 PatternHead. All Rights Reserved. All prices USD.
Site design and illustration by Rawsterne