Responsive Images using CSS background image

Question

I am trying to figure out the best way to approach creating a responsive image to fit the whole background of a div container. There is also two text boxes that have an rbga value that need to be exactly inline with certain part of the image.

I am wondering if it would be better to do a z index and put the image in the html or keep the image in the css as a background image?

Right now, for the rest of my images I am using JavaScript, jQuery and PHP to resize images located in the html. I am also using media queries to adjust my page. I was trying to not do three images; but maybe that is my best option?

Here is what I have so far. I have removed extra code to not add confusion. I also attached a jpg of what i am trying to accomplish. I can get the paragraph divs to line up; but not responsively match with the image.

<section id="content" role="main" class="cf">
   <div class="mission">
       <h1>We are What We Create</h1> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero odio, 
         gravida sedconsequat a, faucibus dignissim</p>
     </div>

   </section>

CSS
.mission {
  background-image:url(../images/gallery_banner.jpg);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

.mission p {
    color: #fff;
    text-align:center;
    text-shadow: 2px 1px 1px  #4c4341;
    background: rgba(81,118,131, .9);
    width: 100%;
    margin: 0 auto;
    margin-top: 220px;
    margin-bottom:5%;
}

.mission h1 {
    font-weight: bold;
    font-size: 120%;
    color: #fff;
    text-shadow: 2px 1px 1px  #4c4341;
    background: rgba(81,118,131, .9);
    letter-spacing:.1em;
    text-align: center;


}

Link to photoshoped image of what I am trying to do:
https://docs.google.com/file/d/0B_TAmXXa2n8OUXJ2LVd0SFZwQVk/edit?usp=sharing

Answer 1

I would put the image into the html and style it with css to fit the container.

<div id="container"><img src="http://i35.tinypic.com/69kdw8.jpg" border="0" alt="Image and video hosting by TinyPic"><div id="d1">Test</div><div id="d2">Test test2</div></div>

and style it:

#container {
    position:relative;
}
#d1, #d2 {
    position:absolute;
    background-color:green;
    opacity:0.7;
    color:white;
}
#d1 {
    height:16%;
    width:39%;
    bottom:0;
    left:0;
}
#d2 {
    height:68%;
    width:29%;
    top:0;
    left:58%;
}

http://jsfiddle.net/RuwRU/