Advanced Search

Fixed Background Image 'Trick'

/ Published in: CSS
Save to your folder(s)
Neat CSS fixed background image scrolling 'trick'

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css">
  2. body { padding:0; margin:0; background:#fff; }
  3. .content {
  4. 	padding:10px 20px 10px 200px;
  5. 	border-bottom:1px solid #666;
  6. 	background-color: trasnsparent;
  7. 	background-repeat: no-repeat;
  8. 	background-position: 20px 20px;
  9. 	background-attachment: fixed;
  10. }
  11. .green {
  12. 	background-image: url(images/circle_green.gif);
  13. }
  14. .yellow {
  15. 	background-image: url(images/circle_yellow.gif);
  16. }
  17. .red {
  18. 	background-image: url(images/circle_red.gif);
  19. }
  20. .purple {
  21. 	background-image: url(images/circle_purple.gif);
  22. }
  23. .blue {
  24. 	background-image: url(images/circle_blue.gif);
  25. }
  26. .content p {
  27. 	font:normal 12px/18px verdana;
  28. 	color:#000;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33.  
  34. <div class="content green">
  35. </div>
  36.  
  37. <div class="content blue">
  38. </div>
  39.  
  40.  
  41. <div class="content yellow">
  42. </div>
  43.  
  44. <div class="content purple">
  45. </div>
  46.  
  47.  
  48. <div class="content red">
  49. </div>

URL: http://www.askthecssguy.com/examples/fixedBackgroundImages/example02.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.