Задать вопрос
NotNight
@NotNight
html

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

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

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

https://codepen.io/not-lost-in-code/pen/MWBeEyV
  • Вопрос задан
  • 82 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 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>
Ответ написан
2 комментария
2 комментария
mills
@mills
В класс container__header добавить:

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

Не то?
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Встраиваемый на ленд чат с ассистентом openai с загрузкой файлов
02 мая 2024, в 17:47
10000 руб./за проект
ASO для ios приложения (Иконка+Скриншоты)
02 мая 2024, в 17:42
17000 руб./за проект
Разработать плагин интеграции товаров из Контур.Маркет в Wordpress
02 мая 2024, в 17:25
3000 руб./за проект
Ещё заказы