Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## Backgrounds

Here we use the following images as backgrounds in `div` elements.

wood.jpg | marble.jpg | water.jpg

Example 4.23 - background images - Example 4.23 (Without Styles) | <div class="wood"> Wood <div class="marble"> Marble <div class="water"> Water </div></div></div>body { font-size: 18pt; font-weight: bold; color: white; } div.wood { padding: 1em; background-image: url('http://cscie12.dce.harvard.edu/resources/images/wood.jpg'); } div.marble { background-image: url('http://cscie12.dce.harvard.edu/resources/images/marble.jpg'); padding: 1em; } div.water { background-image: url('http://cscie12.dce.harvard.edu/resources/images/water.jpg'); padding: 1em; }

- Markup
- Style
- Screenshot

    <div class="wood">Wood<div class="marble">Marble<div class="water">Water</div></div></div>

In `style` element (`<style type="text/css">`) within `head` element:

    body {
      font-size: 18pt;
      font-weight: bold;
      color: white;
    }
    div.wood {
      padding: 1em;
      background-image: url('images/wood.jpg');
    }
    div.marble {
      background-image: url('images/marble.jpg');
      padding: 1em;
    }
    div.water {
      background-image: url('images/water.jpg');
      padding: 1em;
    }

Copyright © David Heitmeyer