Почему пропадает изображение если я ставлю background no-repeat?

Question

Что следует поменять что бы изображение не дублировалось?

Если я ставлю:

background-image: no-repeat;

то изображение вообще пропадает.

Код:

.header {
  background-image: url(image/Hero.png) t;
  max-width: 1920px;
  min-height: 700px;
  position: absolute;
  left: -82px;
  top: 91px;
  border: 1px solid #000000;
  box-sizing: border-box;
}

.header__title {
  max-width: 52px;
  min-height: 18px;
  left: 19.53%;
  right: 77.76%;
  top: calc(50% - 18px/2 + 149px);
  margin-top: 490px;
  margin-left: 375px;
  margin-bottom: 192px;
  margin-right: 1492px;
  font-family: PT Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  text-transform: uppercase;
  color: #FFFFFF;
}

.header__subtitle {
  max-width: 560px;
  min-height: 100px;
  left: 19.53%;
  right: 51.3%;
  top: calc(50% - 100px/2 + 212px);
  margin-top: 512px;
  margin-left: 375px;
  margin-bottom: 88px;
  margin-right: 985px;
  font-family: PT Serif;
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
  line-height: 50px;
  color: #FFFFFF;
}

.header__container {
  display: flex;
  justify-content: space-between;
  width: 283px;
  height: 19px;
  left: 19.53%;
  right: 65.73%;
  top: calc(50% - 19px/2 + 281.5px);
  margin-top: 10px;
  margin-left: 334px;
  margin-bottom: 59px;
  margin-right: 1000px;
  font-family: PT Serif;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 19px;
  color: #FFFFFF;
  list-style: none;
  text-decoration: none;
}

.header__data {
  color: #FFFFFF;
}

.header__author {
  color: #FFFFFF;
}

.header__comments {
  color: #FFFFFF;
}

<section class="header">
  <p class="header__title">VEHICLE</p>
  <h2 class="header__subtitle">One of Saturn's largest rings may be newer than anyone</h2>
  <ul class="header__container">
    <li class="header__data">
      <a href="#">June 6, 2019</a>
    </li>
    <li class="header__author">
      <a href="#">By Rickie Baroch</a>
    </li>
    <li class="header__comments">
      <a href="#">4 comments</a>
    </li>
  </ul>
</section>

Ссылка на JSFiddle

Answer 1

У Вас все работает корректно, вероятно проблема в путях или в свойстве position, в сочетании со значениями для свойств top и left из Вашего примера, так как ближайшим relative-родителем .header является body, относительно которого и происходит выравнивание.

.header {
  max-width: 1920px;
  min-height: 700px;
  background-image: url("https://picsum.photos/200");
  background-repeat: no-repeat;
  border: 1px solid #000;
  box-sizing: border-box;
}

<section class="header"></section>

Дублирование происходит по причине того что дефолтным значением для свойства background-repeat является "repeat", т.е повторение по обоим осям X и Y.

БЛОГ НА HUSL

Почему пропадает изображение если я ставлю background no-repeat?

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