How to repeat a background image as a block

Question

Is it possible to repeat the background image as a block? When I make the width of the div 100% and set the height to 70 pixels, this image repeats well, but the problem depends on the width of the window, sometimes half the element appears, and that makes no sense. I want the whole image to be repeated if the space, if not the repetition, 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 image

Answer 1

Try adding this to 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 of round is a new CSS3 option, so it will not work on IE8 and lower (you should not worry about that).

Answer 2

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