Background Images

  • Background images
    • <body ... background="image.gif">
    • Tiling images - repeat
    • <div style="background-image: url(image.jpg)"></div>
      Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background. Stuff in table cell on top of background.
    • Options:
      • Background-position: X and Y
      • Background-size: Cover (Fill the browser window...may bleed of sides) Contain (fill the browser within the browser window) Px, ems % etc
      • Background-repeat: No repeat, repeat-x, repeat-y
      • Background-attachment: scroll, fixed (content scrolls over the image for cool if somewhat dated effect)
    • A style element that has multiple attribute values can be written in shorthand (note the lack of commas or any other punctuation between values:
      • body { background:url(images/history-image.png) no-repeat center #eee9d9 ; }
      • img {padding: 0 10px 0 10px} or img { padding: 0 10px }