How to repeat background image as a block

Question

Is it possible to repeat a background image as a block? When I make the div 100% width and set the height to 70px this image repeats well but the problem is depending on the width of the box, sometimes half of the item shows up and that doesn't make any sense. I want whole image to repeat if there's space if not repeat should end. Is it possible?

#wrapper {
  background-color: #E3E3E3;
  position: relative;
  padding: 55px 0 0 0;
}
#notepadTop {
  display: block;
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: 70px;
  background: url('http://i.imgur.com/lbW0QX6.png') repeat;
}

<div id="wrapper">
  <div id="notepadTop">

  </div>
</div>

This is the image

Answer 1

Try adding this in your css:

background-repeat: round

so, you have:

#notepadTop {
  display: block;
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: 70px;
  background-image: url('http://i.imgur.com/lbW0QX6.png');
  background-repeat: round;
}

the value round is a new CSS3 option so this won't work on IE8 and below (you shouldn't be worry about it).

Answer 2

If I understood your question, you are looking for background-size: cover;