Как сделать так, чтобы луна тоже появилась в шапке? [закрыто]CSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как сделать так, чтобы луна тоже появилась в шапке? [закрыто]

Сообщение Anonymous »

Мой заголовок обрезает фоновое изображение, как это исправить?

Код: Выделить всё

*{
margin:0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: 'Times New Roman', Times, serif;
box-sizing: border-box;
}
body{
min-height: 100vh;
background: linear-gradient(#2b1055,#7597de);
}
header{
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 100px;
}
.logo{
font-size: 28px;
font-weight: bold;
color: #fefefe;
}
.hamburger{
display: none;
}
.nav-bar ul{
display: flex;
}
.nav-bar ul li a{
display: block;
color: #fefefe;
font-size: 20px;
padding: 10px 25px;
border-radius: 50px;
transition: 0.2s;
margin: 0.5px;
}
.nav-bar ul li a:hover{
color: #11101b;
background: #fefefe;
}
@media  screen and (max-width:1320px) {
header{
padding: 0 50px;
}
}
@media  screen and (max-width:1100px) {
header{
padding: 0 30px;
}
}
@media  screen and (max-width:900px) {
.hamburger{
display: block;
cursor: pointer;
}
.hamburger .line{
width: 30px;
height: 3px;
background: #fefefe;
margin: 6px 0;
}
.nav-bar{
height: 0;
position: absolute;
top: 80px;
left: 0;
right: 0;
width: 100vw;
transition: 0.5s;
overflow: hidden;
}
.nav-bar.active{
height: 450px;
}
.nav-bar ul{
display: block;
width: fit-content;
margin: 80px auto 0 auto;
text-align: center;
transition: 0.5s;
opacity: 0;
}
.nav-bar.active ul{
opacity: 1;
}
}
section{
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
}
section img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
как наложить фон в заголовке, поскольку вы можете видеть, что заголовок отсекает луну, я начал свой путь кодирования, пожалуйста, объясните это простым словом... было бы больше полезно, если вы можете предоставить решение, спасибо... есть ли какое-то конкретное свойство для этого, или это можно сделать просто, и я просто допустил ошибку в своем коде.

Подробнее здесь: https://stackoverflow.com/questions/787 ... header-too
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • Солнце и луна Азимут из X, Y, Z - Astro Math в Python
    Anonymous » » в форуме Python
    0 Ответы
    10 Просмотры
    Последнее сообщение Anonymous
  • Солнце и луна Азимут из X, Y, Z - Astro Math в Python
    Anonymous » » в форуме Python
    0 Ответы
    15 Просмотры
    Последнее сообщение Anonymous
  • Как создать кнопку «В корзину» и обновить товар, чтобы таблица соответствовала шапке?
    Гость » » в форуме CSS
    0 Ответы
    39 Просмотры
    Последнее сообщение Гость
  • Ссылки в шапке с изображением в горизонтальном центре
    Anonymous » » в форуме CSS
    0 Ответы
    15 Просмотры
    Последнее сообщение Anonymous
  • Список отписок в шапке письма. Как?
    Anonymous » » в форуме C#
    0 Ответы
    16 Просмотры
    Последнее сообщение Anonymous

Вернуться в «CSS»