Add text to background image using CSS
<p>I am using a background image on a section which covers the whole screen while the section is in view. Then it is covered up by subsequent sections as the page scrolls.</p>

<pre><code>#section1{
 background: URL(../SiteData/Images/SectionBackground.jpg) no-repeat center top fixed #f1ece2;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

min-height:800px;
}
</code></pre>

<p>I want to add text about half way down this image. This I can do, but I want it to stay in position, as if it was actually part of the image. So when the screen scrolls up, the text gets hidden rather than scrolls to the top - so it stays in position on the image.</p>

<p>How would I do this?</p>

<p>Thanks</p>