Posted By

paulgrenwood on 09/23/09


Tagged

css background backgroundimage


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

thesmu
WinterCrow
scitrenbaumgmailcom
kubaitis


Perfect Full Page Background Image


 / Published in: CSS
 

This is a very tall order, and we are going to be pulling out all kinds of different stuff to make it happen. First of all, because the image needs to scale, a traditional CSS background-image is already disqualified. That leaves us with an inline image. This inline image is going to be placed on the page inside of a bunch of wrappers, each necessary for accomplishing all our goals. WORKS WITH IE7+

  1. // HTML
  2.  
  3. <div id="bg">
  4. <div>
  5. <table cellspacing="0" cellpadding="0">
  6. <tr>
  7. <td>
  8. <img src="images/bg.jpg" alt=""/>
  9. </td>
  10. </tr>
  11. </table>
  12. </div>
  13. </div>
  14.  
  15. <div id="cont">
  16. <div class="box">
  17. <!-- content in here -->
  18. </div>
  19. </div>
  20.  
  21.  
  22. // CSS
  23.  
  24. * {
  25. margin: 0;
  26. padding: 0;
  27. }
  28.  
  29. html, body, #bg, #bg table, #bg td {
  30. height:100%;
  31. width:100%;
  32. overflow:hidden;
  33. }
  34.  
  35. #bg div {
  36. height:200%;
  37. left:-50%;
  38. position:absolute;
  39. top:-50%;
  40. width:200%;
  41. }
  42.  
  43. #bg td {
  44. text-align:center;
  45. vertical-align:middle;
  46. }
  47.  
  48. #bg img {
  49. margin:0 auto;
  50. min-height:50%;
  51. min-width:50%;
  52. }
  53.  
  54. #cont {
  55. position:absolute;
  56. top:0;left:0;
  57. z-index:70;
  58. overflow:auto;
  59. }
  60.  
  61. .box {
  62. margin: 0 auto;
  63. width: 400px;
  64. padding: 50px;
  65. background: white;
  66. padding-bottom:100px;
  67. font: 14px/2.2 Georgia, Serif;
  68. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: bsalem on October 3, 2010

I tried this with an SVG image. The image non-opaque parts overwrote the body text. The image did scale. I applied no opacity to the image. Do I need to? I applied the image at the top of the body, do I need to apply it ofter?

You need to login to post a comment.