Advanced Search

Perfect Full Page Background Image

/ Published in: CSS
Save to your folder(s)
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+

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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

You need to login to post a comment.