eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak


Introducton to Web Design
Using the BACKGROUND Attribute  
  • Most people begin their journey into the <BODY> tag by playing with backgrounds. The BACKGROUND attribute allows you to define an image that will be tiled to fill the entire browser window underneath the body content.

  • For example, look at this hideous example in which we take the afraid_icon image from previous examples and add it to the background of a web page with the following HTML:

<TITLE>Yucky Background</TITLE>
<BODY BACKGROUND = "http://www.eff.org/afraid_icon.gif">
<H2>Here is some text which is placed above
a tiled image background.  Obviously, this is not
the best image to use since it draws attention
away from the content.</H2>

  • Notice that the BACKGROUND attribute simply takes an image location as the SRC attribute of the <IMG> tag did. As always, you can either use a relative or absolute link.

  • The figure below shows the result of the previous code in a web browser.

  • Notice how dangerous it can be to use backgrounds.

  • First, like any image, background images take some time to load.

  • Second, if you do not choose the image right, you can easily render your text illegible.

  • Third, notice that the background image will be tiled so that it will fill up the available space. Since you cannot control the height and width of the browser window opened by your client, it is very hard to control exactly what your background will look like.

  • One thing that can help solve some of these problems is to use some of the backgrounds already created for use on the web. You can find background libraries at the Yahoo Background Library which tile seamlessly, utilize safe, stylish patterns, and are small enough to not hinder download time. Of course, many of the libraries also have some terrible, psychedelic patterns as well, so choose carefully.

  • Below is a web page with a more reasonable background texture.

  • As we said above, since backgrounds tile automatically, it is unusual to design a background out of a single no-tiling image. You cannot control browser width and height. Thus if you design your single background for a large monitor, parts of the background will be clipped on smaller monitors whereas if you design your background for a small monitor it will be tiled on larger ones.

  • One exception to that rule is the use of side bars. A side bar is a single image that tiles vertically but does not "appear" to tile horizontally.

  • In a side bar, you create a short but extremely wide line with a color block filling a small margin at the left-hand border. Since the image will tile, the color block will be expanded vertically, but if you choose a width such as 1400 pixels, no browser will ever be able to open wide enough to tile horizontally.

  • The following images shows a side bar image and the resulting web page (Note: We have put a black border around the side bar so that you can see it against the white background)....

Related Resources

Previous Page | Next Page