Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to repeat background image as a block

Tags:

html

css

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

http://i.stack.imgur.com/Npfpv.png

like image 992
Baris Sarac Avatar asked Oct 20 '22 11:10

Baris Sarac


2 Answers

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

like image 111
goerwin Avatar answered Oct 22 '22 00:10

goerwin


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

like image 42
Fernando Claussen Avatar answered Oct 22 '22 01:10

Fernando Claussen