带有背景重复的 div：无重复； 重复

Question

I've got a div with a CSS which states background-repeat: no-repeat; , but if the div is bigger then the image, the image starts to repeat itself.

Any ideas, suggestions etc are welcome. Thank you

.background-image{
    position: fixed;
    top:0px;
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: -1;    
    background-size: 1700px, 819px; 
    background: url('../assets/kafa.jpg');  
    border: 0px;
    background-position: -1050px -550px;
    width: 100%;
    height: 100%;
}

https://jsfiddle.net/ohymeft0/

Answer 1

You are using the background shorthand property which sets many values, including background-repeat . Either change background to background-image , or place your background-repeat property after the background rule.

Answer 2

尝试将background更改为background-image ，这应该可以工作

Answer 3

Try this:

.background-image{
    position: fixed;
    top:0px;
    overflow: hidden;
    z-index: -1;    
    background: url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492__340.jpg') no-repeat;   
    width: 100%;
    height: 100%;
}

As @chriskirknielsen said, your overriding your properties. This solves that.

Answer 4

The property background is shorthand for several CSS background properties (see https://developer.mozilla.org/en-US/docs/Web/CSS/background ).

Where you've set that after background-repeat: no-repeat it overrides the previous property and uses its default repeat style.

If you replace background: url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492__340.jpg'); in your example with background-image (see the amended code snippet below) it should give the result you're expecting.

 .background-image { position: fixed; top: 0px; background-repeat: no-repeat; overflow: hidden; z-index: -1; background-size: 1700px, 819px; background-image: url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492__340.jpg'); border: 0px; background-position: -1050px -550px; width: 100%; height: 100%; }

 <div class="background-image"></div>

Answer 5

  .background-image{ 
    position: fixed;
    top:0px;
    overflow: hidden;
    z-index: -1;
    background: url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492__340.jpg')    no-repeat;
    width: 100%;
    height: 100%;
}