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 Position Background Images?

In the previous exercise, the background image is repeated on the entire background area of the DIV tag. If you want to have one copy of the image at the bottom right corner, you need to use background-repeat and background-position properties as shown in the CSS code below:

<html><head>
<style type="text/css">
  BODY {background-color: gray; color: white}
  DIV.page {background-image: url(follow.jpg); 
    background-color: blue;
    background-repeat: no-repeat;
    background-position: bottom right;
    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 at Bottom Right Corner</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>

If you view this document, you will see the image is positioned nicely at the bottom right corner of the page:
           

How To Specify Two Background Images on a Page?

If you want to add more than one image to your page background, you can use multiple nested DIV tags. Let's say you want to add one background image to the top left corner, and another one to the bottom right corner, you can add two DIV tags right after the BODY tag. On the first DIV tag, you can specify a background image for the top left corner. On the second DIV tag, you can specify a background image for the bottom right corner.

Let's say you two well designed background images for two corners as shown below:
           
           

You can add them with two DIV tags and a matching background color: # 

<html><head>
<style type="text/css">
  BODY {background-color: gray}
  DIV.body {background-color: #f0e0c0;
    background-image: 
    url(port_as_top_left_corner_0.jpg); 
    background-repeat: no-repeat;
    background-position: top left;
    width: 870px; padding: 0px}
  DIV.page {background-image: 
    url(port_as_bottom_right_corner_0.jpg);
    background-repeat: no-repeat;
    background-position: bottom right;
    width: 730px; padding: 70px; text-align: left}
  HR {width: 730px}
  P {width: 730px; font-size: 28px}
  H1 {font-size: 32px}
</style>
</head><body><center><div class="body"><div class="page">
<H1>Background Images at Two Corners</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></div></center></body></html>

If you view this document, you will see two background images nicely positioned and matched with the background color:
           

See the other tutorials article on how to create background corner images on FYICenter.com at http://dev.fyicenter.com/faq/css/psp_fading_images_to_background.html.

Part:   1  2  3  4  5  6  


Selected Developer Jobs:

More...