## Minuteman

Image as a fixed background for the "body". Alternate versions of the image for the "header" and "main" content areas of the page.

The three images:

Rendered in a browser:

Example 10.30
Example 10.30 Source:
<div id="header" > <h1>The Concord Hymn</h1> <h2>Ralph Waldo Emerson (1837)</h2> </div> <div id="main" > <p> By the rude bridge that arched the flood, <br/> Their flag to April's breeze unfurled; <br/> Here once the embattled farmers stood; <br/> And fired the shot heard round the world. </p> <p> The foe long since in silence slept; <br/> Alike the conqueror silent sleeps, <br/> And Time the ruined bridge has swept <br/> Down the dark stream that seaward creeps. </p> <p> On this green bank, by this soft stream, <br/> We place with joy a votive stone, <br/> That memory may their deeds redeem, <br/> When, like our sires, our sons are gone. </p> <p> O Thou who made those heroes dare <br/> To die, and leave their children free, -- <br/> Bid Time and Nature gently spare <br/> The shaft we raised to them and Thee. </p> </div>
In style element (`<style type="text/css">`) within head element:
body { background: #638f29 url(images/minuteman.jpg) 0in -1.25in fixed no-repeat; } #main { background: url(images/minuteman-light.jpg) 0in -1.25in fixed no-repeat; font-family: Times,serif; font-size: x-large; font-weight: bold; line-height: 1.75em; margin-left: 25px; padding: 10px; width: 470px; } #header { background: url(images/minuteman-dark.jpg) 0in -1.25in fixed no-repeat; color: white; font-family: Times, serif; margin-left: 25px; padding: 10px; width: 470px; }
Example 10.30 Rendered:

- With Styles
- Without Styles