overlaying text boxes on an image in specific positions

Question

I have a background image that I want to overlay on it a few box-messages on specific positions. Is there a way to stick the boxes to the image so that it scales with the image and keeps it's exact position ? it probably needs to scale the font-size of the text inside the box too.

on another note, how can I change the background opacity without affecting the boxes on it.

here is a link to jsfiddle: http://jsfiddle.net/zd3CA/

UPDATE I want the result to look like this with boxes on specific parts of the path. When the image resizes my boxes go around. It seems like it wasn't clear.

CSS

.back {
    height: 85em;
    margin-bottom: 5em;
    background: url(http://kpv.s3.amazonaws.com/static/img/film.jpg) no-repeat;
    background-size: contain;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000000;
}
.box-message {
    max-width: 15em;
    min-height: 10em;
    box-sizing: border-box;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.11), -1px 0 3px rgba(0, 0, 0, 0.11);
    background: #fff;
    color:#000;
    padding: 25px 25px 35px 25px;
    position: relative;
}
.flow_three {
    margin-top: 3em;
    margin-left: 5em;
}
.flow_two {
    margin-top: 3em;
    margin-left: 10em;
}
.flow_text h3 {
    color: #1BB366;
    font-size: 20px;
}
.flow_text p {
    font-size: 18px;
    line-height: 25px;
}
.back .container {
    position: relative;
    z-index: 2;
}
.container {
    width: 940px;
}

HTML

<div class="back">
    <div class="container">
        <div class="box-message flow_text flow_three">
             <h3>text</h3>

            <p>text txtegv dsf asd fsda f asdf f as df sadf .</p>
        </div>
        <div class="box-message flow_text flow_two">
             <h3>text</h3>

            <p>text txtegv dsf asd fsda f asdf f as df sadf .</p>
        </div>
    </div>
</div>

Answer 1

.should_work_on_any_browser{ /*For Opacity*/
    min-height: 100px;
    margin: auto;
    -moz-opacity: 0.52;
    opacity: 0.52;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=52);
    position:relative;
}

Answer 2

You simply apply the image as 'background-image' to your relative positioned (parent) container element and set 'background-size' to 'contain' (as you have already done).

Now if you define your (child) boxes with percentage width values and position them absolute also with percentage (relative) values for their positions. the whole should perfectly scale up and down.

Answer 3

If you are saying you want a background image for your form, just apply a background image via css. There is no reason to create an element behind the form as a background, unless you would plan on applying animation via js. Which even then i would suggest using AS2/AS3.

So, as i said use background image on your form via css.

Answer 4

The solution is possible using fluid units like % and em and using absolute position.

The styles are:

*,html{
margin:0px;
padding:0px;
}
.back {
   height: 51em;
   margin-bottom: 5em;
   background: url(http://kpv.s3.amazonaws.com/static/img/film.jpg) no-repeat;
   background-size: contain;
   color: #ffffff;
   text-shadow: 1px 1px 1px #000000;
   width: 60%;
  }
  .back .container {
   position: relative;
   z-index: 2;
  }
  .container {
    width: 100%;
    height: 100%;
   }
  .box-message {

    box-sizing: border-box;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.11), -1px 0 3px rgba(0, 0, 0, 0.11);
    background: #fff;
    color: #000;
    padding: 1% 2%;
   width: 26.66%;
  }
  .flow_three {
    margin-top: 5%;
    margin-left: 5%;
    position: absolute;
  }
  .flow_two {
  margin-top: 1%;
  float: right;
  right: 2%;
  position: absolute;
  }
  .flow_center{
  position: absolute;
  margin-top: 26%;
  margin-left: 44%;
  }
  .flow_text h3 {
   color: #1BB366; 
   font-size: 1.25em;
   }
   .flow_text p {
     font-size: 1.125em;
     line-height: 95%;
    }

The html is

<div class="back">
<div class="container">
    <div class="box-message flow_text flow_three">
         <h3>text</h3>

        <p>text txtegv dsf asd fsda f asdf f as df sadf .</p>
    </div>
    <div class="box-message flow_text flow_two">
         <h3>text</h3>

        <p>text txtegv dsf asd fsda f asdf f as df sadf .</p>
    </div>
    <div class="box-message flow_text flow_center">
         <h3>text</h3>

        <p>text txtegv dsf asd fsda f asdf f as df sadf .</p>
    </div>
    </div>
 </div>