Article: Tiling & Repeating Backgrounds for your Website
An article by Dubtastichttp://dubtastic.com
With one of the previous versions of my site, I would get a ton of questions asking about creating tiling backgrounds for websites. For me personally, there are too many resources available to write a tutorial in creating one, when you can easily find a tutorial out there on the subject.
So what's the purpose of this? Well, I wanted to point out a few things regarding the backgrounds, where to find them, and some help on using them. First, if you do not know how to create one and do not care to create them, here are two resources that have great patterns available:
Now, some have said "I do not see the backgrounds on K10K, where are they?". If you look under the "Specials" section, you will see a small tab labeled "Pixel Patterns":
If you click on "Pixel Patterns" you will see the repeating background library available on K10K, which is quite a good resource to have.
Now that you have found a pattern you like, I would highly recommend dropping this into CSS as follows:
body {
background-image url(images/yourbackground.gif);
}
If you are looking for a CSS example with a little more flexibility and control, you could also try using something like this:
body {
background: #460517 url(images/background.jpg);
}
The above example tells the browser what background color to use and also specifies the image. You can add various repeating options using CSS as well. Since that is well documented elsewhere, there is no need for me to repeat it here.
Now, if you are looking to create your own backgrounds, then this is where I stop. I did some poking around on the web and found several sites that explain the process. Since there are plenty of those tutorials available, I do not have plans on recreating them for the purpose of listing them here. Here are a few places you can look to for advice:
- Creating Textures, Patterns, Seamless Tiles, and Backgrounds - Many links, tutorials, and applications -
- Seemless backgrounds in Photoshop
This tutorial/article prepared by Dubtastic
Website: http://dubtastic.com
Contact:
No portion of this tutorial/article may be reproduced without prior permission.