How to make image repeat itself instead of stretching?

Question

I have background image which is needed to be repeated to it's content like that:

But using this code:

.imgbord {
  background: url('https://i.imgur.com/LGlfFuU.png');
  background-repeat: round;
  color: white;
}

<div style="margin: 42px auto; width: 75%;">
  <div class="imgbord">some random content out here</div>
</div>

I get this:

are you sure you want to repeat? it seems you want 100% in background-size — Temani Afif, Dec 05 '19 at 12:06
I want to repeat the part of it, so it's looks like I shown. @TemaniAfif — Jack Glow, Dec 05 '19 at 12:07
I need to repeat it both in Y and X. So I don't really know how to make it. @Pete — Jack Glow, Dec 05 '19 at 12:08
share the background you are using so we can understand what you have — Temani Afif, Dec 05 '19 at 12:09

Temani Afif · Accepted Answer · 2019-12-05T14:51:52.960

4

I guess you are looking for border-image

.imgbord {
  border:4px solid transparent;
  border-image: url('https://i.imgur.com/LGlfFuU.png') 4 fill round;
  color: white;
  padding:50px;
  display:inline-block;
  margin:10px;
}

body {
  background:grey;
}

<div class="imgbord">some random content out here</div>


<div class="imgbord">some content</div>

Related to understand how it works and how to adjust the values: https://stackoverflow.com/a/56915094/8620333

edited Dec 05 '19 at 14:51

answered Dec 05 '19 at 12:17

Temani Afif

245,468
26
309
415

Everything is ok, but I need to remove this smoothing somehow on the borders. – Jack Glow Dec 05 '19 at 12:22
@JackGlow you need to play with the values. It's a bit tricky but I linked another answer that details how it works so you know how to do – Temani Afif Dec 05 '19 at 12:26
@JackGlow I made an update, a slice of 4 is better and you can use round for the repeat – Temani Afif Dec 05 '19 at 12:37

How to make image repeat itself instead of stretching?

1 Answers1