css背景图像泄漏

Question

This a WavyBar component that is made of a div with 3 background images. The photo and 1 wavy white image at the top and another at the bottom on the top of a photo. That creates the wavy effect.

silver line on the top and bottom of the page

As you can see on this image, there is a silver line on the top and bottom of this div, which is where the background photo is leaking outside of the div.

The css used is the following:

 background-image: url(2de1e10e83bb3f12dc8bfeb1818ee536.png), url(eeb31e00f15749916d5fd9d3ab2b8f10.png), url(f03c768d84f5d17e39ba033692433d0f.png);
    background-repeat: repeat-x, repeat-x, no-repeat;
    background-position: left top, left bottom, center center;
    background-size: auto, auto, cover;

adding these styles, kinda solved the problem, but created a white line on the top of the div

  padding: 1px 0;
  background-clip: content-box;

https://cloud.githubusercontent.com/assets/1951007/20140914/fe52e0c0-a674-11e6-944e-f16a6791659c.png

Already tried box-sizing: with all values

Answer 1

Got into similar issue. The background-color set for an image was leaking from top and bottom, even after playing around with margin, padding and box-sizing.

Finally below solution worked for me. You need to wrap the image in a Div element with height same(or lower than) as that of the image. And push the image slightly to the top.

.image{
    position: relative;
    top: -4px;
}

.parent{
    height: 240px; // keep it fix or use css calc() function
}