div с background-repeat: без повторов; повторы

Question

У меня есть div с CSS, в котором указано background-repeat: no-repeat;, но если div больше, чем изображение, изображение начинает повторяться.

Любые идеи, предложения и т. Д. c Добро пожаловать Спасибо

.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

Попробуйте изменить background на background-image, и это должно работать

Answer 2

Вы используете сокращенное свойство background, которое устанавливает много значений, включая background-repeat. Либо измените background на background-image, либо поместите свойство background-repeat после правила background.

Answer 3

  .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%;
}

Answer 4

Свойство background является сокращением для нескольких CSS свойств фона (см. https://developer.mozilla.org/en-US/docs/Web/CSS/background).

Если вы установили это после background-repeat: no-repeat, оно переопределяет предыдущее свойство и использует свой стиль повтора по умолчанию.

Если вы замените background: url('https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492__340.jpg'); в вашем примере на background-image (см. Исправленный фрагмент кода ниже), это должно дать ожидаемый результат.

.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%;
}

Как сказал @chriskirknielsen, вы переопределяете ваши свойства. Это решает это.