How to overlap auto-scaling images with an auto-scaling background

Question

I am trying to put images over a virtual whiteboard that sits in a scalable div.

I followed this guide to make the "whiteboard" scale: Stretch and scale CSS background

You can see the demo here: http://staging1.populearn.com/new.html

I can't figure out how I can move those red boxes over the whiteboard, and have them scale too. Is it even possible?

Cheers

Here is the HTML:

      <div class="lesson-pane">

        <div id="chalkboard-background">
          <img src="/img/whiteboard_teacher.png" class="stretch" alt="" />

        <div id="chalkboard">
          <div id="chalkboard-images">
            <span id="image1" class="33"><img src="/img/1.png" alt="" /></span>
            <span id="image2" class="33"><img src="/img/2.png" alt="" /></span>
            <span id="image3" class="33"><img src="/img/3.png" alt="" /></span>
          </div><!--/chalkboard-images-->   
        </div><!--/chalkboard-->

        </div><!--/chalkboard-background-->
      </div><!--/lesson-pane-->

And here is the CSS:

.lesson-pane {
  padding: 20px;
  margin-bottom: 30px;
  background-color: #f5f5f5;
  background-image:url('/img/background_europe.png');
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  border-style:solid;
  border-width:3px;
  max-width: 850px;
}
.lesson-pane h1 {
  margin-bottom: 0;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -1px;
}
.lesson-pane p {
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
}

#chalkboard {
    position: relative; 
}

#chalkboard-background {
    width: 100%; 
    position: relative; 
}

.stretch {
    width:100%;
}

.33 {
    width:33%;  
}

#chalkboard-images {
    position: relative; 
    width:100%;
}

score 1 · Accepted Answer · answered Feb 11 '12 at 01:13

If you're scaling, you need to ensure you're using the same kind of measurements, in this case percentages. Then, absolutely position your chalkboard on top of the graphic, then tell each of the three image container to take up 1/3 of it's space, and each image inside to stretch to 100%.

This is the CSS to make that work (in addition to your existing CSS, you could paste this after)

/* Make .lesson-pane use relative % padding */
.lesson-pane {padding:2%;}

/* Absolutely position ".chalkboard" over graphic (approx) */
#chalkboard {position:absolute; left:3%; top:5%; width:77%; height:75%;}

/* Make each image take up 1/3 of space and scale */
#chalkboard-images {white-space:nowrap; font-size:0px; text-align:center;}
#chalkboard-images > span {display:inline-block; width:31.3%; margin:1%;}
#chalkboard-images > span > img {width:100%; height:auto;}

How to overlap auto-scaling images with an auto-scaling background

1 Answers1