Using Repeat Patterns in CSS – How to
Seamless patterns and CSS….easy when you know how.
This tutorial is aimed at CSS newbies and it’s going to show you how easy it is to add repeat patterns to your CSS based web designs. You don’t really need to know anything about HTML and CSS. I’ve included a zip file with a full example that you can take a look at. Also, here’s a live demo if you want to see what we’re aiming for.
HTML Code Sample
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>
CSS Code Sample
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.png
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.
Comments
Thank you SO much!! This site is wonderful and the advice is really easy to follow and effective. i also appreciate you saving it in multiple formats. Your hard work is greatly appreciated!!
very helpful indeed!
I had to change jpg to png in the code to make it running though ;)
nice job, thx.