CSS/HTML bg image


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!-- place into external css inside <head> -->
  2. #fights div{
  3. padding: 0px 10px 10px 50px;
  4. }
  5. #fights div p.first{
  6. font-weight: bold;
  7. margin: 0 0 5px;
  8. }
  9. #fights div p.second{
  10. margin-left: 60px;
  11. }
  12. #fights div p .heading{
  13. font-weight: bold;
  14. font-size: 16px;
  15. color: #045397;
  16. line-height: 25px;
  17. display: block;
  18. }
  19. .foodDrive{
  20. background: #E3F1FE;
  21. background: url(http://www.schoolsfighthunger.org/images/waystofight/icons/sfh_fooddrive.png) no-repeat;
  22. }
  23. .gardenFood{
  24. background: url(http://www.schoolsfighthunger.org/images/waystofight/icons/sfh_garden.png) no-repeat;
  25. }
  26. <!-- remember to take out the <style> tags when u place it into an exeternal css file -->
  27.  
  28. <div id="fights">
  29. <div class="foodDrive">
  30. <p class="first">
  31. <span class="heading">The National School Food Drive</span>
  32. <span>Whether you are a seasoned food drive veteran or are a newbie looking to start a new drive at your school we have tons of great tips, tools and ideas as well as a <a href="/">Free Drivers Toolkit</a> full of inspiration for ways to make your drive bigger, better and more effective! Check out the National School Food Drive and become part of a national school coalition to end hunger! <a href="/">NSFD page</a>.</span>
  33. </p>
  34. <p class="second">
  35. <a href="/">Get Free Driver's Tookit</a>
  36. </p>
  37. </div>
  38. <div class="gardenFood">
  39. <p class="first">
  40. School Garden or Fresh Food Project
  41. </p>
  42. <p>
  43. School gardens and fresh food projects offer a fun, healthy and educational way for students to fight hunger! From deciding what to plant, how often to harvest and understanding the value of fresh foods, gardens engage students in issues related to ecology, food, sustainability and community.
  44. </p>
  45. <p class="second">
  46. <a href="/">Learn more about garden projects</a>.
  47. </p>
  48. </div>
  49. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.