I would like to place a animated image behind a paragraph?

[uhello]

Hi, I am using HTML5. I have a <p> that is 800x600 with a solid background color. On the right edge, I would like to place a small animation of a person peeking out from behind it to the right. Is there an example code snippet I can look at? This would be Canvas, right?

 

[Ingolme]

If the animation is a GIF file you can just use absolute positioning for it. You probably should use a <div> instead of <p> and then have <p> elements inside just for text.

 

HTML

<div class="peeking">
  <p>Content here</div>
  <img class="corner" src="animation.gif">
</div>

CSS

.peeking {
  background-color: #EAEAEA;
  width: 800px;
  height: 800px;
  position: relative; /* This is important */
}
.peeking img {
  position: absolute;
  top: 0;
  width: 80px;
  height: auto;
  right: -80px;
}

If the animation is not a GIF, we need to know exactly how you plan to make the animation.

[ShadowMage]

It could be done with Canvas, yes, but that's much more complicated than Ingolme's suggestion (using a GIF) and wouldn't work in instances where the user has JavaScript disabled since canvas requires JavaScript to function.

[dsonesuk]

The example has mixed opening p and closing div.

 

You can just use float: right; with margin-right: -80px; without positioning.