Stretch background image


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE HTML>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3. <title>Stretch background</title>
  4. <style type="text/css">
  5. html, body {
  6. height: 100%;
  7. margin: 0;
  8. padding: 0;
  9. font-family: Verdana, Geneva, sans-serif;
  10. font-size: 100%;
  11. color: #000;
  12. background-color: #FFF;
  13. }
  14.  
  15. img#bg {
  16. position:fixed;
  17. top:0;
  18. left:0;
  19. width:100%;
  20. height:100%;
  21. }
  22.  
  23. #content {
  24. position:relative;
  25. z-index:1;
  26. Margin: 20px;
  27. }
  28.  
  29. #content p {
  30. font-size:80%;
  31. font-weight: bold;
  32. }
  33.  
  34. #content h1 {
  35. color:#369;
  36. font-size:90%;
  37. font-weight: bold;
  38. }
  39.  
  40. </style>
  41.  
  42. <!--[if IE 6]>
  43. <style type="text/css">
  44. html { overflow-y: hidden; }
  45. body { overflow-y: auto; }
  46. #bg { position:absolute; z-index:-1; }
  47. #content { position:static; }
  48. </style>
  49. <![endif]-->
  50. </head>
  51.  
  52. <img src="images/stretchbg.jpg" alt="background image" id="bg" />
  53.  
  54. <div id="content">
  55.  
  56. Content goes here
  57.  
  58. </div>
  59.  
  60. </body>
  61. </html>
  62.  
  63. <!-- Original at http://www.texaswebdevelopers.com/examples/stretch-bg.asp -->

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.