Задать вопрос
@Lorema
css

Как сверстать такую страницу?

b7bb030af7d2413fa1e26bf903c2d8a7.PNG При добавлении картинки через свойство background-image:url картинка отображается опираясь на свою изначальную высоту и ширину, а мне хотелось бы что бы она занимала всю страницу (в ширину естественно), и к тому же, как добавить текст внизу картинки? В данном примере использовал десятки <br>, как решить это по другому?
  • Вопрос задан
  • 267 просмотров
1 комментарий
Подписаться 2 Оценить 1 комментарий
Решения вопроса 3
julia_amake
@julia_amake
Front-end разработчик
если задать свойство background-size: cover, изображение будет масштабироваться под размеры блока.

десятки br не используйте, для позиционирования есть такие свойства, как margin (внешний отступ) и padding (внутренний), абсолютное позиционирование или псевдо-таблицы (display: table-cell; vertical-align: bottom;)
Ответ написан
5 комментариев
5 комментариев
hronik87
@hronik87
Обитаю в 1С-Bitrix
Если на картинке ничего нет, то можно не бэкграундом, а просто картинку запихать в блок. И прописать примерно такое:
div.block{
    width: 100%;
    height: auto;
}
div.block img{
    width: 100%;
    height: auto;
}
Ответ написан
Комментировать
Комментировать
@senselessV7
Может быть попробовать html, body и оберткам этого блока задать width: 100%, height: 100%
А для текста display: block чтобы друг под другом был (вместо br)
хотя не факт что понял вопрос)
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Senior Frontend (JavaScript) разработчик
Vital Partners
от 350 000 до 420 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Рекламный пост
16 февр. 2025, в 19:54
500 руб./за проект
Надо найти рабочую связку ustd/uzs и рассказать как ее проворачивать
16 февр. 2025, в 17:15
1000 руб./за проект
Docker на развертывание Django + React
16 февр. 2025, в 15:54
2500 руб./за проект
Ещё заказы