Posted By

m-pokrovskii on 02/24/10


Tagged

css background full-bg


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

delikassap
kubaitis


Full BG


 / Published in: CSS
 

URL: http://css-tricks.com/examples/FullPageBackgroundImage/tech2.html

  1. img.bg {
  2. /* Set rules to fill background */
  3. min-height: 100%;
  4. min-width: 1024px;
  5.  
  6. /* Set up proportionate scaling */
  7. width: 100%;
  8. height: auto;
  9.  
  10. /* Set up positioning */
  11. position: fixed;
  12. top: 0;
  13. left: 0;
  14. }
  15.  
  16. @media screen and (max-width: 1024px){
  17. img.bg {
  18. left: 50%;
  19. margin-left: -512px; }
  20. }
  21.  
  22. div#content {
  23. /* This is the only important rule */
  24. /* We need our content to show up on top of the background */
  25. position: relative;
  26.  
  27. /* These have no effect on the functionality */
  28. width: 500px;
  29. margin: 0 auto;
  30. background: #fff;
  31. padding: 20px;
  32. font-family: helvetica, arial, sans-serif;
  33. font-size: 10pt;
  34. line-height: 16pt;
  35. -moz-box-shadow: #000 4px 4px 10px;
  36. -webkit-box-shadow: #000 4px 4px 10px;
  37. }
  38.  
  39. body {
  40. /* These rules have no effect on the functionality */
  41. /* They are for styling only */
  42. margin: 0;
  43. padding: 20px 0 0 0;
  44. }

Report this snippet  

You need to login to post a comment.