Lesson 17 – Non-Repeating Backgrounds

Sure, having a tiled background for your page is nice, but what if you don’t want it constantly and repetitively repeating? Not many of the top websites actually have that. This is how you do it (remember that the image URL is only an example one):

body { background: url(http://images.neopets.com/new_shopkeepers/t_62.gif) no-repeat; }

• There isn’t particularly much to add, compared to what you would do with a repeating background. All you do is simply type “no-repeat”, after the URL of your background image. Simple, but remember to always keep the dash between the words, or else it won’t work. The image will be in the top left of the page now, not repeated.

But, what if you don’t want your background image

body { background: url(http://images.neopets.com/new_shopkeepers/t_62.gif) no-repeat right bottom; }

• Now, after “no-repeat”, you have told the computer where on the page you want your background to go. In this case, it will be on the very right bottom of the page. Also, you could put: right top, right center, left bottom, left center, left top, top center, bottom center, or just center. Try experimenting with it, to get your background image wherever you want!

Now, this still might not be perfect for you. If your page’s content is long enough to make the window of you web browser (eg: Internet Explorer, Firefox, Netscape), allow you to scroll down, then your page background will only be visible when you scroll down. Sometimes, you might not want this. So, this is the answer:

body { background: url(http://images.neopets.com/new_shopkeepers/t_62.gif) fixed no-repeat right bottom; }

• If you do this, then your background will always be at the left bottom of the Window, not the page.
• However, be careful if you do choose to do that. You don’t want your text to overlap with your background,. so if you do do that, then try putting all of your text in a table, which isn’t wide enough to overlap with the background.

And that will be it for now. There are a couple more background image tricks, but then it gets trickier and trickier from then on. I hope this helps you (I know one person who it has helped, yes, you know who you are). Bye!

Copyright 2000-2007 Neopets, Inc. All Rights Reserved. Used With Permission