advanced code snippet search

Posted By

icecreamboyy on 02/22/11


Tagged

css html


Versions (?)

Stretched website background in CSS

 / Published in: CSS
 
Expand | Embed | Plain Text 
  1. <html>
  2. <title>CSS Background Stretch</title>
  3. <head>
  4. <!-- Below is the CSS code -->
  5. <style type="text/css">
  6. html, body {height:100%; margin:0; padding:0;}
  7. #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
  8. #content {position:relative; z-index:1; padding:10px;}
  9. </style>
  10.  
  11. <!-- The above code works for all browser except IE so we are going to specify another special style sheet for IE6 to make the whole code cross browser compatible -->
  12.  
  13. <!--[if IE 6]>
  14. <style type="text/css">
  15. html {overflow-y:hidden;}
  16. body {overflow-y:auto;}
  17. #page-background {position:absolute; z-index:-1;}
  18. #content {position:static;padding:10px;}
  19. </style>
  20. <![endif]-->
  21. </head>
  22. <body>
  23. <--! HERE IS THE HTML CODE NEEDED-->
  24. <div id="page-background"><img src="background.jpg" width="100%" height="100%"></div>
  25. <div id="content">
  26. You site's content
  27. </div>
  28. </body>
  29. </html>

Report this snippet  

You need to login to post a comment.