Tiled backgrounds made easy
I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.
What do you do when you want to create a tiled background image for your website? Perhaps you open your copy of Photoshop or Fireworks, create a texture, add an image outline, export the image, and re-edit as required to get the effect you want? That's great but what if you want some help with the process?
Recently, I discovered BgPatterns.com which is a tiled background designer website that makes the whole thing a doddle! The easy-to-use interface allows you to select an image for the pattern, change its opacity, size, position, rotation, and change the canvas texture, and foreground and background colors. BgPatterns.com also allows you to preview the image on the current page and download it for use in your style sheet and website.
This is a fantastic online resource and it works great. Have a play and create your own tiled background!
Comments
29 Aug 2008 12:38:23
Enjoy your blog, and the link to BgPatterns was really useful. I am new to all this, how do you get the main body of the site into a white box whilst having the tiled background surround it (like on your site)?
29 Aug 2008 13:49:37
@Graham. Thanks for your comment. The background image is applied as a repeating image using a style rule for the body tag of the HTML document.
Within the HTML code, there is a containing div tag that is a fixed width, centered, and with a background colour white. This division tag is effectively a box that contains the rest of the content.
This is all achieved using a style sheet with the rules in it. The HTML page uses this style sheet to determine how it is displayed. Hope this helps but if you want to know more, try searching ‘cascading style sheet’ on Google.
Comments are OFF for this post.