Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - Page Layout and Background Image Design

By: FYICenter.com

Part:   1  2  3  4  5   6 

(Continued from previous part...)

How To Set Font Sizes to Relative Length Units?

Knowing that setting font sizes to absolute length units will cause problems on text sizes with different browser resolutions, you can set your font sizes to relative length units, like px (pixel). The tutorial exercise code below sets font sizes to pixels:

<html><head>
<style type="text/css">
  BODY {background-color: gray}
  DIV.page {background-color: white; width: 730px;
    padding: 25px; text-align: left}
  HR {width: 730px}
  P {width: 730px; font-size: 16px}
  H1 {font-size: 32px}
</style>
</head><body><center><div class="page">
<p>
<img src=fyi_banner_blended.jpg width=728 width=90>
</p>
<H1>730-Pixel Wide with an Image and a 32px Title</H1>
<hr align=left>
<p><script language="JavaScript">
  for (i=0; i<20; i++) {
    for (j=0; j<40; j++) {
      document.write(j+' ');
    }
    document.write('<br/>');
  }
</script></p>
<p align="right">By FYICenter.com</p>
</div></center></body></html>

Save the code in 32PixelPageLayout.html and view it with FireFox and IE on a 1280x1024 screen, you will see the page displayed nicely in both browsers:
           
           

What Are the Background Style Properties?

There are 5 style properties that you can use to control the background of a HTML block tag:

  • background-color: Specifies the color of the background. It takes a color value or the keyword "transparent".
  • background-image: Specifies an image to be on the background. It takes a URL value or the keyword "none".
  • background-repeat: Specifies if the background image should be repeated or not, and how to repeat. It takes 4 possible keywords: "repeat", "repeat-x", "repeat-y", and "no-repeat".
  • background-attachment: Specifies how the background image should be attached to the content or the browser window. It takes 2 possible keywords: "scroll" and "fixed".
  • background-position: Specifies the initial position of the background image. It takes a pair of two values of percentages, length units, or key words.

Note that when HTML tags are nested, backgrounds of different tags become layers with the background of the most inner tag being the top layer.

How To Specify a Background Image?

The quickest way to specify a background image is to use the background-image style property. Let's try with an image from the Windows system called, follow.jpg:
           

The tutorial HTML and CSS document below adds a background image to the DIV tag:

<html><head>
<style type="text/css">
  BODY {background-color: gray; color: white}
  DIV.page {background-image: url(follow.jpg); 
    width: 730px;  padding: 25px; text-align: left}
  HR {width: 730px}
  P {width: 730px; font-size: 28px}
  H1 {font-size: 32px}
</style>
</head><body><center><div class="page">
<p>
<img src=fyi_banner_blended.jpg width=728 width=90>
</p>
<H1>Background Image Repeated</H1>
<hr align=left>
<p><script language="JavaScript">
  for (i=0; i<10; i++) {
    for (j=0; j<24; j++) {
      document.write(j+' ');
    }
    document.write('<br/>');
  }
</script></p>
<p align="right">By FYICenter.com</p>
</div></center></body></html>

View the document in any browser, you will get something like:
           

(Continued on next part...)

Part:   1  2  3  4  5   6 


Selected Developer Jobs:

More...