HTML - How to put text over a white background over a background image

Question 1

Try This:

HTML

    <body background="http://i1155.photobucket.com/albums/p560/sean1rose/backgroundimage_zpsa6c55a2e.png">
<div id="mainContainer" align="center">
   <header>
    <img src="http://i1155.photobucket.com/albums/p560/sean1rose/headerimage_zps9efccb9d.png" width="700" >
   </header>
   <section id="content-section"> 
    <h2 style="color:#ff9900">“They All Laughed When This 49 Year Old Mother Of Two Said She Could Do Twenty Pulls-Ups In a Row…</h2>
    <h2 style="color:#ff00ff">
    But The Laughs Stopped And Their Jaws Dropped When She Grabbed the Pull-up Bar and Effortlessly Banged Out Five, Ten, And Finally Twenty Pull-ups In A Row”
    </h2>
<div class="message" align="left">
    <p>
    Dear Friend,
    </p>
    <p>
    Frankly, it doesn’t matter if you’re struggling to do one pull-up or if you’re banging out multiple pull-ups and just want to take your game to the next level… I can help you get there. Just watch the video to the right if you’re not convinced.
    </p>
    <p>
    <b>I know what you’re thinking…</b> Yeah right!
    </p>
    <p>
    You probably think that I’m an anomaly, a freak of nature, or that pull-ups come naturally to me.
    </p>
    <p>
    Nothing could be further from the truth.
    </p>
    <p>
    You see, there was a time where I could barely hang from the pull-up bar and do a single pull-up. My brain could NOT get my muscles to pull me to the bar no matter how hard I tried and how strong my back was. These days I can knock out rep after rep of pull-ups because of a unique and relatively strange new training method that I’ve discovered.
    </p>
     </div>
   </section>
</div>
 </body>
</html>

CSS

#mainContainer
        {
        margin:0 auto;
        width: 75%;
         }
#content-section{
    background-color: white;
    box-shadow: 4px 4px 4px rgba(50, 50, 50, 0.75);
  margin-top:-18px;
  width:700px;

}
#content-section h2{

    text-align: center;
}

.message
{
  margin-left:15px;
}

first see the output here:

http://jsbin.com/gimovuzo/58

IF this answer helps tou please vote up. :)

Question 2

Make a container of width:80% and margin:0 auto

This will help you have the main content in the middle of the page.

Now, you can put all your contents in to it.

Give grey color to you body & make a section inside the 80% wide container & give its BG white color.

CSS

body{
    background-color: grey;
}
#mainContainer{
    margin:0 auto;
    width: 80%;
}
#content-section{
    background-color: white;
    box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.75);
}

HTML

<body>
   <div id="mainContainer">
       <header></header>
       <section id="content-section"> </section>
       <footer></footer>
   </div>
</body>

This is one way of doing it. You can annytime replace the background-color with the images you want.