This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!
Guest

Sobreposição de imagens com DIVs

By: a guest on Nov 7th, 2011  |  syntax: HTML  |  size: 1.18 KB  |  views: 103  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  
  6. <style type="text/css">
  7. #fundo{
  8.         background-image:url(fundo.jpg); /* Imagem que ficará por traz de todas */
  9.         background-repeat:no-repeat;
  10.         width:800px;  /* tamanho  da div */
  11.         height:600px; /* tamanho  da div */
  12. }
  13. #meio{
  14.         background-image:url(meio.png); /* Imagem que ficará no meio das duas imagens */
  15.         background-repeat:no-repeat;
  16.         width:800px;  /* tamanho  da div */
  17.         height:600px; /* tamanho  da div */
  18. }
  19. #frente{
  20.         background-image:url(frente.gif); /* Imagem que ficará na frente de todas*/
  21.         background-repeat:no-repeat;
  22.         width:800px;  /* tamanho  da div */
  23.         height:600px; /* tamanho  da div */
  24. }
  25. </style>
  26. </head>
  27.  
  28. <body>
  29. <div id="fundo"> <!-- imagem mais ao fundo -->
  30.         <div id="meio"> <!-- Imagem do meio -->
  31.         <div id="frente"> <!-- Imagem da frente -->
  32.         <!-- A idéia é colocar uma div dentro da outra, qualquer coisa me pergunte que explico melhor -->
  33.         </div>
  34.     </div>
  35. </div>
  36. </body>
  37. </html>
  38.  
  39.  
clone this paste RAW Paste Data