![]() | BACKGROUND ALTERATION! | ![]() |
Sponsor Links Free Image Hosting Your source for free image hosting - upload your images! Poker Strategies and Tips Poker, online poker, poker terms, poker accessories, poker tips and tricks. Photoshop Tutorials Over 3,000 tutorials for Photoshop, Flash and 3DS Max! 6,000 Free Fonts Download over 6,000 Free Fonts for Mac and PC @ FontVillage.com Buy Website Visitors 1,000 Targeted U.S. Visitors for $3.50 - 30 day guaranteed. Reading Tarot Cards Videochat with certified tarot readers & psychics - unlimited tarot cards readings! Affiliate Software Start an affiliate program and design to maximize affiliates' productivity PPC Search Engine Low cost advertising for your website! Technical Service Provider Your number one source for computer repairs and network solutions | LESSON 1-06-02: Adding Background Images Web Design Lessons > Lesson 1-06-02: Adding Background Images
Online Web Design Course is going to continue by teaching you how to add a background image to your HTML documents and tables. HTML Document Background ImagesIn order to actually assign a background image to an HTML document, we're first going to need to obtain or create such an image. Fortunately, I'll provide one here for you! Just save the below image to the same location as your web pages. Right click on the below image and select "Save Picture As..." from the menu. Then select your location and click "Save" or press "Enter" on your keyboard.
Sidenote: I've taken the above image from Grsites Absolute Background Textures Archive. You can find lots and lots of free web graphics on that website. Now, we're going to create a web page that uses the above image as a background image. Note that browsers automatically "tile" background images, so that the background becomes like a seamless texture. The HTML code is below:
The "bg.jpg" value of the "background" attribute refers to the filename of our background image. If you have saved the above image with a different filename, simply change the "bg.jpg" value to your own filename. The above HTML code is going to produce the below output: As you see, our image has been "tiled" vertically and horizontally to create a seamless texture. You can create different background effects by using different images. HTML Table Background ImagesNext in our free web design course, we'll learn how to assign background images to HTML tables. Assigning a background image to tables works just like assigning a background image to an HTML document. The same attribute - "background" - is used along with the <table> tag. Let us create a table with the same background image we used above:
The above HTML code produces a table with a background image. I've also added a border attribute to make our table more appearent:
Sidenote #1: Check out my web design resources page to download a superb eBook! Sidenote #2: If you enjoyed this lesson, please link to it :) This lesson is over. In the next lesson of our free web design course, we're going to learn how to avoid background - foreground conflicts.
Nearby Lessons: • Lesson 1-04 Web Colors Unleashed• Lesson 1-05 HTML Tables • Lesson 1-06 Background Alteration • Lesson 1-07 Images • Lesson 1-08 Hyperlinking Back To Top Home | Resources | Articles | Lessons | Directory | Forums Copyright© 2004 Onur Özcan. All Rights Reserved. | Partner Links |