Tech Tips Home
The Best Tech Tips And Daily Deals
Newsletter On The Internet!

WorldStart Tech Tip And Store Search
Email: Password: Login Remember Me

Like what you see here? Subscribe to the Tech Tips newsletter!   Email: Subscribe

Web Design Workshop: Break Your Design 2—Background Tile

Thursday, September 15th, 2005 by | Filed Under: Web Design

Previously we talked about breaking your website design into smaller pieces so it can be reassembled into your web page building program. Let’s talk about backgrounds today.

My design had a simple white background, which is easy to work with. You just set the background color to white in your web page building program and that’s it. But what do you do if you have a colored background element in your design? Well – you tile it.

Tiling a background allows you to assign a very small piece of the background in your web design program and the program will tile that small piece. That means it will place that small graphic next to itself over and over to cover the entire background area. This is a great way to incorporate a background into your design because, since the same small background image is used over and over, the file size for that image is only counted once when the page loads. In other words that graphic may be used 100 times to make up your background image but since it is really only one image, just repeated, it only has to load once.

Check the help file or tutorial of the particular web page building software you are using for “background image” instructions to learn how to assign the background.

I added a background to my design so I can show you what I mean.


click for larger image

I’m just going to grab a sliver of that background and then let the web page building program tile it.

click for larger image

Here is the sliver I grabbed

click for larger image

This sliver of the background is 3 pixels wide and 592 pixels high. The web page building program is going to keep placing it next to itself in order to create the whole background image.


click for larger image

Keep in mind that the background image is going to be tiled vertically and horizontally (side by side and top to bottom). So, if I just use my background sliver that is 592 pixels high, then when a person viewing my site has their browser open to let’s say 700 pixels then the background is going to repeat itself. This could cause design problems if a person is scrolling down to read text and then the background design is showing up in places that you don’t want it to.

Click here for an example.

As long as you are aware of what your background is going to do then you can make necessary adjustments. You could make adjustments to your text, like I did here by putting a white background in my text table, or you may need to mess around with your background in order to get it to repeat the way you want it to. A little trial and error is part of the learning process of putting a web site together.

Leave a Reply

Like these tips? Get them for FREE in your email!

WorldStart's Tech Tips Newsletter

  • Tech Tips Daily - Become a tech pro! Get the very best tech and computer help sent directly to your email every weekday!

  • Tech Tips Weekly - If you don't want our Tech Tips newsletter every day, then sign up for this weekly newsletter to get the best information of the week. Sent on Fridays.

Other Newsletters

  • WorldStart's Daily Deals - Every week, we send out great deals in our Daily Deals newsletter. Many of these deals are exclusively for our Daily Deals newsletter subscribers and can't be found with our regular specials.

  • Just For Grins - Each issue includes a couple clean jokes, some funny quotes, and a hilarious reader's story. Newsletter is sent five days a week.

Enter Email Address:


Your e-mail address is safe with us!
We only use it to send you the newsletters you request. It is NEVER disclosed to a third party for any reason, ever! Plus, if you decided you don't like our newsletters (don't worry, you'll love them), unsubscribing is fast and easy.

Free Newsletter Signup

Tech Tips Daily

Become a tech pro! Get the very best tech and computer help sent directly to your email every weekday!

Tech Tips Weekly

The week's best in tech and computer help. Get your issue sent to your email every Friday!

WorldStart's Daily Deals

The very best deals on the Internet! Get a new set of incredible sales every day of the week!

Just For Grins

Clean jokes, funny quotes, and hilarious comics. Sent 5 times a week straight to your email.


Love Worldstart? Refer A Friend!

WorldStart's Premium Membership

Tip Archive