title: How to have two background images. One a top banner and the second a textured background?
body: <p>I'm starting to work on a website. I would like to have two background images. One would be a banner image at the top similar to the gray strip across the top of stack overflow's website. Then the other image is a image that I would have to create a textured background. This would be like the white space on this website but instead of a color it would be a repeatable image. Websites with the look i'm going for are pinterest.com, subtlepatterns.com, Facebook.com, etc...</p>
  
  <p>I have tried many different things. I tried putting a background in the html tag in the css. That didn't work. I also tried putting two different background images in the body tag. That didn't work because it would just show the first one. I also tried creating the background in it's own class. But when I did that it wouldn't show up at all. Maybe I left something out of the html? </p>
  
  <p>Currently I have Following code:</p>
  
  <pre><code>body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  background-image:url(../images/absurdidad.png);
  background-repeat:repeat;
  }
  </code></pre>
  
  <p>This has created the main background image that takes up the whole screen like I want it to. Know if I could add the second one just at the top to only repeat horizontally then it'll be great!</p>
  
  <p>Thanks in advance for the help. </p>