Background x-repeat negative margin for overlap

2020-07-27 03:37发布

问题:

Actually my first question on stack:)

I'm trying to get a negative (right) margin on my repeating background, so there won't be a gap between the repeating images.

It seems there is no css syntax for this.

To make things clear, i added an image below. So i'm trying to get the repeating images of the cookie-like things to overlap so there's no gap between them.

screenshot of the page

回答1:

You can apply multiple backgrounds to an element, so why not use this background image twice, with different horizontal offsets.

body {
  min-height:170px;
  background:
    url('http://i.stack.imgur.com/jKAKB.png') 0 100% repeat-x,
    url('http://i.stack.imgur.com/jKAKB.png') 75px 100% repeat-x;
}

PS the cookie like things are called kruidnoten. Although everybody calls then pepernoten, which is not actually true.