Kevin Powell - Community•3mo ago

Make a Background repeat smooth

Hi guys, can anyone share how they make background repeat smoothly? I have an image with repeated background but the edges of it doesnt repeat smoothly.

30 Replies

lko•3mo ago

Can you share an example of what you mean by a website with a smooth repeating background? And the picture you want to use for your website?

clevermissfox•3mo ago

I’m not sure if this is what you’re looking for but background-repeat: space | round are newer values https://youtu.be/oiai47goI6A?si=iMX4sqWpVsMr-2JM

Kevin Powell

YouTube

The background values no one knows about

Looking to step up your CSS game? I have free and premium courses 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=repeat-space 🔗 Links ✅ Finished version of the star count: https://codepen.io/kevinpowell/pen/WNmKPBr ✅ Browser support: https://caniuse.com/background-repeat-round-space ⌚ Timestamps 00:00 - Int...

13eck•3mo ago

You need an image designed to do that. Otherwise you’ll have to modify your image to fit a repeating pattern—and modification of an image isn’t always allowed by the license

Nibelung ValestiOP•2mo ago

Hi guys, thank you so much for the response. I'm referring to an image like this:

Nibelung ValestiOP•2mo ago

Nibelung ValestiOP•2mo ago

But when repeated, it looks like this,

Nibelung ValestiOP•2mo ago

Like what is the 'strategy to make it seamless' Thank you so much for the response, I really really appreciate it 've tried cropping it to a single block

Nibelung ValestiOP•2mo ago

then using repeat but the slant effect is removed, and I cant control the subsequent rows

Nibelung ValestiOP•2mo ago

Chris Bolson•2mo ago

You could possibly achieve this with a background linear-gradient.

Jochem•2mo ago

you need to crop it to a number of blocks that in total has the same offset as one block's width you basically just need to make the texture itself line up, there's no CSS trick or whatever, it's just editing the image

capt_uhu•2mo ago

This would be a good starting point for a gradient recreation: https://codepen.io/jsnkuhn/pen/VwowZVx?editors=1100

Nibelung ValestiOP•2mo ago

Hi guys, that's awesome. I did not think it was possible to create this with gradient Thank you so much Yeah, but It's really hard since it's slanted, I haave no idea how to pattern it as such

13eck•2mo ago

Basically what you need to do is create a large version of the image you want to repeat then "cut it up" into a smaller piece that's tileable

Nibelung ValestiOP•2mo ago

I did it here but it lost the slanted positioning

13eck•2mo ago

For example, take this above image and cut it up into a smaller image so that when it's tiled it repeats correctly. No, what you did is crop out a single block. Which isn't what you want. You need several blocks to get the effect you want I would suggest looking at some free image sites for repeating patterns to see how others have done it This isn't a CSS (or even FE) issue. It's an image creation technique

Nibelung ValestiOP•2mo ago

Got it, thanks I'll definitely do this

13eck•2mo ago

When doing your Google/YouTube/etc search I think the term you want to use is "seamless"

Nibelung ValestiOP•2mo ago

Nice, thnak you. I'll definitely learn it for future issues like this Right now, I took the gradient route and modified it:

background-image: repeating-linear-gradient(
      -65deg,
      var(--color-blue) 0 1px,
      #0000 2px 120px,
      var(--color-blue) 30px 140px
    ),
    repeating-linear-gradient(
      rgba(255, 255, 255, 0.1) 0 40px,
      var(--color-blue) 40px 70px
    );

background-image: repeating-linear-gradient(
      -65deg,
      var(--color-blue) 0 1px,
      #0000 2px 120px,
      var(--color-blue) 30px 140px
    ),
    repeating-linear-gradient(
      rgba(255, 255, 255, 0.1) 0 40px,
      var(--color-blue) 40px 70px
    );

I didn't know it was possible and asked chatgpt to explain it lol. But it make sense to me now, but still looks complicated.

capt_uhu•2mo ago

yeah, the issue that makes recreating this with gradients so complicated is that we are still hacking the gradient syntax to create stripes (which are the exact opposite of gradients). There's a stripe() syntax speced but no browser supports it yet....

Jochem•2mo ago

The pattern you're using isn't easy to get repeating because there's not quite a point where one of the next shapes lines up vertically with the one at the top. I selected (pixel perfect) the top left corner of the shape in the first row, and this is where it's closest to matching shapes lower down:

Jochem•2mo ago

you can see that both the one in the middle and the one at the bottom don't line up to the line like they should, the middle shape is four background-squares off to the right, the one on the bottom is four too far to the right.

Jochem•2mo ago

That said, this is the closest you can get with this particular input image

Jochem•2mo ago

if you wanted to get it perfect, you'll have to do some math on the height and width of the individual shapes, the angle of the slant, and the offset of the next shape

Tok124 (CSS Nerd)•2mo ago

@Nibelung Valesti I would use a pseudo element and a mask. Something like this

Tok124 (CSS Nerd)•2mo ago

Here you have compiled CSS with vendor prefixes

body {
  background: url(//unsplash.it/seed/1/1920/1080) center/cover no-repeat fixed;
}
body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(128, 128, 128, 0.8);
  -webkit-mask: repeating-linear-gradient(transparent 0 10px, red 0 60px), repeating-linear-gradient(-60deg, transparent 0 10px, red 0 250px);
  -webkit-mask-composite: source-in, xor;
          mask: repeating-linear-gradient(transparent 0 10px, red 0 60px) intersect, repeating-linear-gradient(-60deg, transparent 0 10px, red 0 250px);
}

body {
  background: url(//unsplash.it/seed/1/1920/1080) center/cover no-repeat fixed;
}
body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(128, 128, 128, 0.8);
  -webkit-mask: repeating-linear-gradient(transparent 0 10px, red 0 60px), repeating-linear-gradient(-60deg, transparent 0 10px, red 0 250px);
  -webkit-mask-composite: source-in, xor;
          mask: repeating-linear-gradient(transparent 0 10px, red 0 60px) intersect, repeating-linear-gradient(-60deg, transparent 0 10px, red 0 250px);
}

Tok124 (CSS Nerd)•2mo ago

Btw, i would probably use some Custom Properties for this. Something like this

Nibelung ValestiOP•2mo ago

Guys. Thank you for the response. I appreciste the hell and amazed how people have different solutions. Thank you once again and Ill try them all out

Gaming

Programming

Make a Background repeat smooth