advanced code snippet search

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

Expand | Embed | Plain Text 
  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.