Как сделать так, чтобы фон за текстом стоял фиксированно, а текст мог менять позицию. CSS

Question

Я создал фон для текста, но при изменении позиции текста, двигается и сам фон. Как сделать так, чтобы текст мог менять позиции по этому фону, но сам фон был во всю ширину веб-страницы и неподвижным?

.title-site {
  display: inline;
  font-size: 40px;
  font-weight: 900;
  position: relative;
  left: 10px;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: blue;
}

.account {
  display: inline;
  font-size: 20px;
  position: relative;
  left: 650px;
  bottom: 5px;
}

.site {
  background-color: #0062ff;
  width: 1080;
}

<body>
  <div class="site">
    <div class="title-site">
      <span>Crypto</span>
    </div>
    <div class="account">
      <a href="login.html">Вход</a>
      <a href="register.html">Регистрация</a>
    </div>
  </div>
</body>

Answer 1

.site {
  width: 100%;
  position: relative;
}
.account {
  right: 10px;
  position: absolute;
}

Answer 2

Использовать left: 650px это каварство ಥ_ಥ

.title-site {
  display: inline;
  font-size: 40px;
  font-weight: 900;
  position: relative;
  left: 10px;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: blue;
}

.account {
  display: inline;
  font-size: 20px;
  position: relative;
  bottom: 5px;
}

.site {
  background-color: #0062ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(1080px, 100%);
}

<body>
  <div class="site">
    <div class="title-site">
      <span>Crypto</span>
    </div>
    <div class="account">
      <a href="login.html">Вход</a>
      <a href="register.html">Регистрация</a>
    </div>
  </div>
</body>

БЛОГ НА HUSL

Как сделать так, чтобы фон за текстом стоял фиксированно, а текст мог менять позицию. CSS

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