How can I set negative margin for background URL image in using CSS?

Question

I need to fit a background URL into a seamless pattern using just CSS/HTML.

To get this done, I am trying to apply a property like margin (negative) to make background URL image overlap each other on repeat.

I am using a DIV element right now, applying a negative margin on this element itself just affect the element, not the background URL image.

Any ideas how to solve this?

Current code on HTML

<body>
    <div class="bg"></div>
</body>

Current code on CSS

<style>
    .bg{
        background: url('./pattern.png');
        background-size: 600px;
        width: 100vw;
        height: 100vh;
    }
</style>

Render result of the code above:

Render result of the code above

Thanks in advance.

why not updating the PNG to make it look like a real pattern ? — Temani Afif, Nov 03 '21 at 20:28
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position — j08691, Nov 03 '21 at 20:29

score 2 · Accepted Answer · edited Nov 03 '21 at 21:07

2

You can use multiple background-images and then use their position to make them overlap. https://developer.mozilla.org/en-US/docs/Web/CSS/background

.bg {
  background: url('https://picsum.photos/600'), url('https://picsum.photos/600');
  background-size: 600px;
  background-position: -100px bottom, left top;
  background-repeat: no-repeat, no-repeat;
  width: 100vw;
  height: 100vh;
}

<div class="bg"></div>

edited Nov 03 '21 at 21:07

Dominik

6,078
8
37
61

answered Nov 03 '21 at 21:06

Lundstromski

1,197
2
8
17

1

I decided to apply your solution to the .bg::before, so I can change and manipulate the background image without changing the flow of the document ;) Thanks, Dominik! – Khebab-Case Nov 04 '21 at 13:51

How can I set negative margin for background URL image in using CSS?

1 Answers1