Как закрепить на фоне не фоновое изображение?

Question

Хочу оставить изображение не являющееся фоном, позади текста. Так чтобы оно выглядело как элемент фона. Пробовал задать position: fixed, но тогда оно съезжает влево. А мне нужно чтобы оно оставалось по середине.

.fon {
  background-image: url(https://i.imgur.com/PzZ9Hd6.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  z-index: 100;
  font-family: "Arial";
  line-height: 1.5;
}

.center-img {
  text-align: center;
}
.center-text {
 text-align: center;
}

<body class="fon">
  <div class="center-img">
    <img width="200" src="https://stackoverflow.design/assets/img/logos/so/logo-meta.png">
  </div>
  <p class = "center-text">Вот здесь текст, который должен быть поверх изображения</p>
</body>

Answer 1

Я так понимаю, вы хотите получить что-то такое:

.fon {
  background-image: url(https://i.imgur.com/PzZ9Hd6.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  z-index: 100;
  font-family: "Arial";
  line-height: 1.5;
  height: 100vh;
  position: relative;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: fixed;
}

.logo {
  position: relative
}

.text {
  position: absolute;
  width: 100%;
  height: 100%;
  color: red;
  font-weight: bold;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

<body class="fon">
  <div class="container">
    <div class="logo">
      <img width="200" src="https://stackoverflow.design/assets/img/logos/so/logo-meta.png">
      <div class="text">Some text</div>
    </div>
  </div>
</body>

FlexBox слушается лучше для выравниваний, а чтобы было не слева, нужно задавать ширину.

БЛОГ НА HUSL

Как закрепить на фоне не фоновое изображение?

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