Repeat CSS Background Image a Set Number of Times

CSS: Repeat background image integer number of times

You can't set the background of an element to repleat a set number of times. You'll have to find another option, possibly creating an element for the space you need.

How can I repeat image 5 times using css?

You can use the image as a background for an element, and set the size of the element so that the image is repeated exactly five times.

Example:

div {
  background: url(http://placekitten.com/100/100);
  width: 100px;
  height: 500px;
}

Demo: http://jsfiddle.net/ANbHr/

How to repeat the same image a number of times in html?

This one works fine for me.
Check it out...

Just clone element what u need and append it inside the section.

var count = $(window).width() / $(".box1").last().width();

for (var i = 1; i <= count; i++) {
  $("#top-section").append($(".box1").last().clone(true));
}

#top-section {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top-section">
  <img src="images/box1.png" class="box1">
</div>

repeating background-image until exact width

It is possible, but you need to nest another div or span to achieve what you are looking for.

For Instance,

WORKING DEMO

The HTML:

<div>
    <span></span>
</div>

The CSS:

div {
    background-color: #808080;
    height: 100px;
    width: 100px;
}

span {
    background: url("http://heasarc.gsfc.nasa.gov/xamin/doc/img/delete.png") repeat-x scroll 0 0 #808080;
    display: inline-block;
    height: 100px;
    width: 50px;
}

Hope this helps.

---

Related Topics