This page is an example of how to set the background for a particular article. Click on the buttons at the top right or scroll the page to see the effect
Here's the HTML Code
<section id="section1">
<header id="header1"><div class="headerText">Header 1</div></header>
<div class="downArrowBox">
<div class="downArrow">➤</div>
</div>
<article id="article1">
<div class="centeringDiv">
<p>Article 1</p>
</div>
<div class="clearFloats"></div>
</article>
</section>
<section id="section2">
<header id="header2"><div class="headerText">Header 2</div></header>
<div class="downArrowBox">
<div class="downArrow">➤</div>
</div>
<article id="article2">
<div class="centeringDiv">
<p>Article 2</p>
</div>
<div class="clearFloats"></div>
</article>
</section>
<section id="section3">
<header id="header3"><div class="headerText">Header 3</div></header>
<div class="downArrowBox">
<div class="downArrow">➤</div>
</div>
<article id="article3">
<div class="centeringDiv">
<p>Article 3</p>
</div>
<div class="clearFloats"></div>
</article>
</section>
<section id="section4">
<header id="header4"><div class="headerText">Header 4</div></header>
<div class="downArrowBox">
<div class="downArrow">➤</div>
</div>
<article id="article4">
<div class="centeringDiv">
<p>Article 4</p>
</div>
<div class="clearFloats"></div>
</article>
</section>
<section id="section5">
<header id="header5"><div class="headerText">Header 5</div></header>
<div class="downArrowBox">
<div class="downArrow">➤</div>
</div>
<article id="article5">
<div class="centeringDiv">
<p>Article 5</p>
</div>
<div class="clearFloats"></div>
</article>
</section>