NotNight
@NotNight

Как сделать фоном картинку и выровнять весь текст внутри?

Можно ли как то без position реализовать?
Ранее был общий контейнер на 1300px, я его убрал, чтоб картинка встала во весь фон
Но как теперь манипулировать с текстом, чтоб его выровнять по середине ( не по центру )

Никак могу сообразить...

https://codepen.io/not-lost-in-code/pen/MWBeEyV
  • Вопрос задан
  • 87 просмотров
Пригласить эксперта
Ответы на вопрос 2
noder_ss
@noder_ss
Линуксоид-энтузиаст и SQL разработчик
Вот так?:
<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <div class="bg">
         <div class="inner"><h1>Heading</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, perspiciatis nobis tempore deserunt iusto delectus alias sunt at quo aut molestias possimus cum numquam rerum pariatur quis ab ut quasi!</p></div>
     </div>
 </body>
 <style>
     .bg{
         width: 900px;
         display: flex;
         justify-content: center;
         align-items: center;
       
         height: 600px;
        
         background: url(https://img.freepik.com/free-vector/spring-landscape-scene_52683-56331.jpg?t=st=1676042552~exp=1676043152~hmac=a344e4dbe3e47487bf10ec2aa6bef3ea1bc3b4e23a68ef595ea082d4ea17755f);
         background-repeat: no-repeat;
         background-size: cover;
        }
.inner{
    width: 100%;
    color: white;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
   /*Затемнение*/ backdrop-filter: brightness(50%);
}
 </style>
 </html>
Ответ написан
mills
@mills
В класс container__header добавить:

display: flex;
justify-content: center;
align-items: center;

Не то?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
PERX Нижний Новгород
До 50 000 ₽
10 окт. 2024, в 13:46
100000 руб./за проект
10 окт. 2024, в 13:37
1000 руб./за проект
10 окт. 2024, в 13:35
400000 руб./за проект