• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Radio Zen > Layering and Attachment

Layering and Attachment

If you haven’t loaded the original design and scrolled it horizontally, we recommend doing so now (FIGURES 5A and 5B). Contrary to what you may guess upon seeing the effect, there is no scripting going on. Radio Zen cleverly makes use of layering and the fixed value for the background-attachment attribute. Attaching a static image of the numbered FM radio dial to the body element causes any scrolling within the page to leave the image in place, and the rest of the page scrolls over the top of it. Going back to the style rule for the body element, an extra line containing properties like background-image and background-position is added as one big shorthand rule:

body {
 font: 10px Georgia, Arial, Helvetica, sans-serif;
 color: #353638;
 background: #F8F8EE url(schaal.jpg) no-repeat fixed top center;      
 margin: 0px;
}


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint