caption
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:
pattern.gif
- Add the image called pattern.gif to the same folder that contains your HTML file (or put them both on your dektop).
-
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>
- In a browser, your website background should now look like this:
- 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.
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.