title: How to make rollover images in CSS using multiple image backgrounds and :hover pseudo
body: <p>I am attempting to make some rollever effects on a splash page I'm creating for a site. I would like to use CSS3's ability to have multiple backgrounds and the :pseudo class to achieve this. </p>
  
  <p>Here is my attempt; however, his does not display in Dreamweaver or Chrome. </p>
  
  <pre><code>#1 {
  width: 143px;
  height: 142px;
  background: url(../assets/Home/1a.jpg) top 0px no-repeat;
  background: url(../assets/Home/1b.jpg) top -143px no-repeat;
  display: inline-block;
  }
  #1:hover {
  background: url(../assets/Home/1a.jpg) top -143px no-repeat;
  background: url(../assets/Home/1b.jpg) top 0px no-repeat;
  }
  </code></pre>
  
  <p>Any thoughts on how this could be improved or suggestions of alternate routes to achieve my goal?</p>