Почему не работает background хотя все указал правильно

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

*,
*, :before,
*, :after {
    box-sizing: border-box
}
h1,h2,h3,h4,h5,h6 {
    margin:0;}

/*container*/
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* intro */
.intro {
    width: 100%;
    height: 100vh;
    background: url ("../images/intro.png" center no-repeat );
    -webkid-background-size:cover;
    background-size:cover;
}
<div class = 'intro'></div>


Ответы (5 шт):

Автор решения: Astrodynamic

center no-repeat указывается вне url().

В background указываются следующие свойства, каждый из которых отделяются пробелом.

  • background-attachment
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position / background-size
  • background-repeat


К тому же url и адрес не отделяется пробелом url("./*.*")
→ Ссылка
Автор решения: Zhihar

center no-repeat надо после url(), а не внутри него

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

*,
*, :before,
*, :after {
    box-sizing: border-box
}
h1,h2,h3,h4,h5,h6 {
    margin:0;}

/*container*/
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* intro */
.intro {
    width: 100%;
    height: 100vh;
    background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQO0rbin_JFvbmVHN_-pZfc24H5Ej_9iaM-SA&usqp=CAU") center no-repeat;
    -webkid-background-size:cover;
    background-size:cover;
}
<div class = 'intro'></div>

→ Ссылка
Автор решения: UModeL

Потому, что не нужно пробелы лепить всюду. Например, вот тут url здесьнедолжнобытьпробелов ("../images/intro.png" center no-repeat )

body {
  font: 15px/1.6em 'Montserrat', sans-serif;
  color: #333;
  margin: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

/*container*/
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* intro */
.intro {
  width: 100%;
  height: 100vh;
  background: url('https://i.stack.imgur.com/m9NKc.png') no-repeat center / cover;
}
<div class='intro'></div>

→ Ссылка
Автор решения: Qwertiy

хотя все указал правильно

Ну и где же правильно, если хром пишет Invalid property value?

background: url ("../images/intro.png" center no-repeat );
background: url("../images/intro.png") center no-repeat;
→ Ссылка
Автор решения: Msmicha200

background: url("../images/intro.png") center no-repeat;

→ Ссылка