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
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).
If I understood your question, you are looking for background-size: cover;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With