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

Chapter 3. Notebook Paper > Beyond the Basic Background

Beyond the Basic Background

To make the web page shown in Figure 3.1 look more like a realistic piece of paper, you would want to add some extra graphic details beyond the lined background, like a torn edge or a coffee stain. Without CSS3, it’s certainly possible to add these graphic details. But new properties in CSS3 make it easier and keep your markup cleaner. Let’s add some of these new properties now to enhance the background.

Scaling the Background Image

One thing that would make the background look more realistic is if the text were aligned to the notebook paper lines, instead of overlapping them indiscriminately. To fix this without CSS3, you would need to set a base font-size and line-height in pixels, and then adjust the spacing between the lines in your background image to match. This would work for most users. But if anyone resized the text, or had non-standard user settings to override the pixel font sizes, the text would become misaligned. The text could scale, but the background image couldn’t.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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