CODEWITHSUNDEEP
htmlcss
Baris Sarac
Baris Sarac

Reputation: 115

How to repeat background image as a block

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

https://i.sstatic.net/Npfpv.png

Upvotes: 5

Views: 639

Answers (2)

goerwin
goerwin

Reputation: 1241

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).

Upvotes: 2

Fernando Claussen
Fernando Claussen

Reputation: 198

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

Upvotes: 1

Related Questions