Фоновый повтор: без повтора; не работает

Ограничив высоту тела до 100% высоты экрана, вы увидите background-repeat: no-repeat; не работает.

Как это или будет ли это исправлено в коде? https://jsfiddle.net/z3gq0y5x/

Почему фон все еще повторяется?

Как бы это исправить в коде?

Я использую background-repeat: no-repeat;, но это не работает в коде.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body::before {
  content: "";
  background-repeat: no-repeat;
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.bg1 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

.bg2 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

.bg3 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

enter image description here

Это также можно увидеть в фрагменте, который я предоставил.

(function randomBackground() {
  const classNames = [
    "bg1",
    "bg2",
    "bg3"
  ];

  const random = Math.floor(Math.random() * classNames.length);
  document.querySelector("body").classList.add(classNames[random]);
}());



const videoPlayer = (function makeVideoPlayer() {
  const config = {};
  let player = null;

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onYouTubeIframeAPIReady() {
    const frameContainer = document.querySelector(".video");
    videoPlayer.addPlayer(frameContainer, config.playlist);
  }

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    player.stopVideo();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100); // percent
    shufflePlaylist(player);
  }

  function addPlayer(video, playlist) {

    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady
    };
    player = new YT.Player(video, config);

  }

  function init(videos) {
    config.playlist = videos.join();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
  }

  return {
    addPlayer,
    init
  };
}());

videoPlayer.init([
  "CHahce95B1g",
  "CHahce95B1g",
  "CHahce95B1g",
  "CHahce95B1g"
]);
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body::before {
  content: "";
  background-repeat: no-repeat;
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.bg1 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

.bg2 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

.bg3 {
  background-image: linear-gradient(45deg, #102eff, #d2379b);
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.video-wrapper {
  position: relative;
  margin: auto;
  max-width: 640px;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: fade 10s ease-in 0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.hide {
  display: none;
}
<div class="outer">
  <div class="tcell">
    <div class="video-wrapper">
      <div class="ratio-keeper">
        <div class="video video-frame"></div>
      </div>
    </div>
  </div>
</div>

enter image description here

Ответ ниже дает мне следующее:

enter image description here

Второй обновленный ответ:

Обновленный ответ приводит к тому, что видео больше не центрируется посередине.

Видео изначально было сосредоточено посередине моего вопроса, который я разместил.

Ответ, который был предоставлен, испортил это.

Видно здесь:enter image description here

Не могу воспроизвести.

vee 09.04.2022 16:48

Ограничив высоту тела до 100% высоты экрана, вы увидите background-repeat: no-repeat; не работает.

Erica Levine 09.04.2022 16:51

Ваш фоновый повтор находится в body::before, но ваше фоновое изображение — в body.bg1.

vee 09.04.2022 16:56
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
1
3
42
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны поставить background-repeat: no-repeat; к body, а не к body::before. Также добавьте min-height: 100% к вашему html

html{
  min-height: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

body{
    height: 100%;
    background-repeat: no-repeat;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.container{
  display:flex;
  align-items:center;
  height: 100%;
}

Назначение .container — центрировать видео по вертикали.

Вот также html-код:

<div class="container">
  <div class="outer">
    <div class="tcell">
      <div class="video-wrapper">
        <div class="ratio-keeper">
          <div class="video video-frame"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Это почти идеально, но удаление высоты может привести к неправильному фону на экране другого размера.

vee 09.04.2022 16:57

Да, я только что заметил, проблема решена. Тело сохраняет высоту 100%, но удаляется из html. Спасибо, что указали =)

erecodes 09.04.2022 17:04

Это не работает. Смотри: i.imgur.com/HZqZ1Cc.png Код: jsfiddle.net/1kyhmapb

Erica Levine 09.04.2022 17:20

@EricaLevine @erecodes Удалить height: 100%; с тела. Установите min-height: 100%; только на html.

vee 09.04.2022 17:33

Обновите свой ответ.

Erica Levine 09.04.2022 17:34

@vee Можете ли вы показать мне, как это работает в коде, потому что теперь видео больше не центрировано посередине. Видно здесь: i.imgur.com/RJJZbyd.png

Erica Levine 09.04.2022 17:37

Обновленный ответ приводит к тому, что видео больше не центрируется посередине. Видно здесь: i.imgur.com/RJJZbyd.png

Erica Levine 09.04.2022 17:42

Эй, Эрика, предыдущий результат для меня тоже не был в центре. Центрирование элементов по вертикали — это совсем другая тема, и вы должны проверить это здесь: stackoverflow.com/questions/79461/…

erecodes 09.04.2022 17:46

Видео изначально было сосредоточено посередине моего вопроса, который я разместил. jsfiddle.net/z3gq0y5x Ответ, который был предоставлен, все испортил.

Erica Levine 09.04.2022 17:47

@EricaLevine jsfiddle.net/v1sm3eL5 Измените способ min-height в html и body. Добавьте отображение flex к содержимому по центру по вертикали.

vee 09.04.2022 17:50

Эрика, я сделал обновление с быстрым исправлением вертикального выравнивания. Оберните плеер внутри контейнера div.

erecodes 09.04.2022 17:55

@EricaLevine Я немного отредактировал код, зная, что вам нужно выровнять его по вертикали, что немного меняет код. Ваше изображение, которое выглядит так, как будто видео центрировано, на самом деле таковым не является, если вы посмотрите на него через инспектор. Он центрирован по фону, но не по странице. Поэтому, когда мы исправили первоначальную проблему, связанную с повторяющимся фоном, проблема с выравниванием по вертикали также стала видимой, поскольку размер страницы был не просто размером с ваш контент, а на самом деле вся страница.

erecodes 09.04.2022 18:08

Другие вопросы по теме