Question

Consider a web page consisting in a background part that holds an image on top of which I would like to create an animation (for example image=sky and animation=moving-clouds). This thing is 100% width.

On this “canvas”, a 100% content part should be placed.

The reason why I am asking this question is because I can simply achieve something like this working with divs and absolute positioning. But I do not know how to make something like this when divs have a 100% width!

I would be able to write something like this:

<div id='canvas' style='width:100%;background-image:...'>
  <div id='cloud1' style='...'></div>
  <div id='cloud2' style='...'></div>
  <div id='cloud3' style='...'></div>
</div>
<div id='cont' style='width:100%'>
  my content here
</div>

Styling canvas and cont so that cont appears on canvas and elements like clousx are moved by javascript but they live behind cont.

How to achieve this?

Answer 1

I don’t know if I got you right, but you can do it exactly the way you want it. So this is a combination of width: 100%; and position: absolute;.

Demo

Try before buy

The demo uses for demonstration purposes the background-property with a CSS3 rgba-value.

CSS

div.outer {
  position: absolute;
  width: 100%;
  height: 100%;
  border:1px solid red;
}

div.text {
  background: rgba(255,255,255,0.5);
}

div.cloud {
  position: absolute;
  top: 20px;
  left: 20px;
  height: 50px;
  width: 50px;
  border: 1px solid red;
}

HTML

<div class="outer">
    <div class="cloud"></div>
</div>

<div class="outer text">
  Content goes here
</div>