Как добавить фоновое изображение в css

Как в html вставить фон

В этой статье мы покажем, как добавить и позиционировать фоновое изображение в HTML-документе, используя стили CSS.

Как позиционировать фоновое изображение

(устанавливает одно или несколько фоновых изображений для элемента) (устанавливает, должно ли повторяться фоновое изображение, а если повторяется, то каким образом) (устанавливает, прокручивается ли фоновое изображение со всей страницей, или оно фиксированное) (устанавливает начальную позицию фонового изображения)

Пример

В этом примере фоновое изображение расположено в центре. Можете также выбрать другие значения, например, left top; left center; left bottom; right top; right center; right bottom; и т.д.

Несколько способов позиционирования фонового изображения:

• repeat (фоновое изображение повторяется и по вертикали, и по горизонтали)
• repeat-x (фоновое изображение повторяется только по горизонтали)
• repeat-y (фоновое изображение повторяется только по вертикали)

Пример

В этом примере фоновое изображение повторяется только по вертикали.

Используйте значение no-repeat, чтобы фоновое изображение не повторялось (изображение отображается только один раз).

Пример

Для того, чтобы создать фоновое изображение на всю страницу с помощью CSS, добавьте фоновое изображение к контейнеру, задав height: 100%.

Пример

Для того, чтобы получить прозрачное фоновое изображение, используйте свойство opacity, которое указывает прозрачность элемента. Выберите значение в пределах 0.0-1.0. , чтобы снизить степень прозрачности (например, 0.5 делает изображение полупрозрачным).

Пример

В вышеприведенном примере изображение имеет прозрачность 50%.

В IE8 и более старых версиях используется filter:alpha(opacity=x), где можно задать значение в пределах 0-100.

Узнайте как сделать фон страницы в html документе и создавайте свои статьи наглядно читаемыми и структурированными

Доброго времени суток всем желающим узнать и усвоить что-то новое! Вы когда-нибудь обращали внимание на внешний вид сайтов, при разработке которых создатели поленились оформить фон страниц? И я обращал. Это выглядит убого. Часто из-за отсутствия привычных нам разделений между разными видами информации она смешивается и просто отпадает желание далее что-либо смотреть на таком веб-ресурсе.

Чтоб такой беды не случилось с вашим проектом я решил написать статью на тему: «Как сделать фон страницы в html». Прочитав публикацию, вы узнаете, с помощью каких инструментов можно задавать фоновое оформление, как сделать фон фиксированным или меняющимся и многое другое, что поможет сделать привлекательным ваш сайт. А теперь начнем!

Основные инструменты для задания фона веб-страниц

Для установки фонового изображения разработчиками веб-языков был предусмотрен атрибут background. Он имеется как в html, так и в css.

В языке разметки – это атрибут тега body, а в стилевых таблицах – универсальное свойство, которое позволяет задать до 5 характеристик заднего плана одновременно. Background – достаточно гибкий элемент, который можно использовать для задания фона в виде одного цвета, цветной картинки или даже анимации.

Так, для установки фонового изображения через единицу html достаточно написать такой код: . и вместо слов «адрес файла» вставить путь к картинке.

Однако заметьте! Если в виде фона вы хотите видеть однотонное полотно, заданное значением из палитры цветов, то это делается при помощи атрибута bgcolor.

Цвета в css и html задаются либо английским словом (например, red), либо специальным кодом, который состоит из знака # и шести символов после него (например, #FFDAB9).

При наборе второго варианта в специализированных программных продуктах для разработчиков, палитра автоматически появится перед вами. Если же вы только начали изучать данные веб-языки, то код цвета можно подсмотреть в интернете.

Background как свойство в каскадных стилевых таблицах

Он задается или в отдельном файле с css стилями, или в элементе . С помощью данного свойства можно устанавливать фоновые рисунки или цвет, указывать начальное местоположение на странице, задавать повторяющиеся и фиксированные изображения. Для большей наглядности я оформил определения в таблице.

Параметры	Предназначение
background-attachment	Используется для установки фиксированного или прокручиваемого изображения вместе с контентом сайта. Бывает fixed, scroll и inherit
background-image	Задает изображение фона. Может указываться одновременно с цветом. Тогда последний будет отображаться, пока полностью не загрузится картинка
background-position	Задает начальное расположение объекта для предыдущего параметра. Горизонтально указывается right, left и center, а по вертикали – bottom, top и center. Помимо этого, можно наследовать положение (inherit), задавать в процентах, пикселях и других размерностях
background-repeat	Применим при использовании атрибута background-image. Регламентирует, каким образом будет повторяться изображение. Можно указывать 2 значения: для горизонтали и вертикали. Существуют такие характеристики: no-repeat, repeat, repeat-x, repeat-y, inherit, space
background-color	Устанавливает цвет заднего плана из палитры. Цвет наследника всегда совпадает с цветом элемента-предка.
inherit	Наследует все характеристики родительского элемента

Время для практического занятия

Разобрав главные элементы управления задним фоном, а также их атрибуты, приступим непосредственно к разбору конкретного примера. В коде программы, представленной ниже, я попытался включить все описанные элементы.

Итак, перед нами стоит задача установить задний фон из двух картинок: анимации и обычного изображения. При этом gif-анимация будет фиксирована, а рисунок прокручиваться вместе с содержимым страницы.

Также мы используем блоки больших размеров для того, чтобы отследить разницу между параметрами fixed и scroll. Обязательно попробуйте запустить пример самостоятельно и посмотреть, что выйдет!

На этой ноте можно подытожить нашу работу. Вступайте в ряды моих верных подписчиков, задавайте вопросы, если что-то непонятно, и не жадничайте ссылкой на мой блог, а делитесь ею с друзьями. Желаю приятного обучения. Пока-пока!

High Star

Ну, что же… пришла пора определиться, на чьем же фоне мы будем умопомрачающе выглядеть! И где же тот чудесный тег, который за это дело отвечает? Какие у него есть, выражаясь умным словом атрибуты? И, главное, каким образом разместить всю нашу красоту?

Короче, вопросов — множество! А ответ всего один. Ну нету такого тега вообще! Еще не придумали!

Но не огорчайтесь! Нет тега и не надо! Зато есть два чудесных атрибута известного нам дескриптора BODY. Так что встречайте старого знакомого!

Фон, или как принято называть задний фон в переводе на английский означает background. Поэтому нет ничего проще запомнить два атрибутика, созданных в его честь. Один — background, а другой — bgcolor.

Так чем же они отличаются? Какими возможностями обладают? И, главное, чем будут нам полезны?

Начнем, с самого простого — bgcolor. Этот атрибут отвечает за цвет фона. Вы можете подставить любое значение, в буквенном или в числовом значении цвета и ваш фон окрасится как по волшебству.

Что ж, ради примера можем открыть наш шаблон, либо любой, созданный нами ранее файл и попытаться залить страничку любимым цветом. Я же открою свою страничку index.html в NotePad (Блокнот) и внесу следующие изменения:

Листинг 11. Файл index.html

Сохраним наше творение под тем же именем и посмотрим, что получилось:

Я на синем фоне

Если по каким-то причинам вам не нравится голубой фон, можете взять другой цвет, например розовый, можете даже писать цвет не буквами, а числами. Только не забудьте впереди числа поставить решетку. И все у вас получится! Можете поиграть разными цветами, пока не надоест. А как надоест, будем читать дальше про другой атрибут — background.

Этот атрибут указывает не на цвет изображения, а на картинку, которую стоит поместить в качестве фона, или как еще говорят, фоновых обоев. Обои можно подобрать любые, какие только подскажет вам фантазия. Моя фантазия подсказала мне взять картинку, на которой я в новом пиджаке. А потому, не мудрствуя лукаво, открываю свой файл index.html и делаю следующие изменения:

Листинг 12. Файл index.html

Сохраняем этот файл и смотрим, что у нас получилось

оно — фоновое изображение!

Что ж, с одной стороны, приятно видеть столько умных людей в одном месте, но с другой стороны… ну куда столько. Однако, отбросив шутки в сторону, можно понять, что же сделал атрибут background — он просто взял и размножил исходное изображение, заполнив им весь экран.

Но нельзя ли загрузить одну картину, но на весь экран? В принципе, можно! И мы сейчас этим займемся. Единственно, что необходимо учесть, так это размеры изображения. Так, при разрешении экрана 800 х 600, свободного места для изображения, если вычесть все верхние и нижние панели, остается 781 х 476 пикселей. Вот и подберем такое изображение.

Поэтому я опять открываю программу Adobe Photoshop, выбираю фотографию с изображением моря, подгоняю его размеры под искомые 781 х 476, оптимизирую для web и сохраняю под именем fonsea.jpg в своей папке foto. Ну и затем, иду проторенным путем: открываю файл index.html и ввожу следующие изменения:

Листинг 13. Файл index.html

Опять сохраняем и смотрим результат

И вот оно — море! Играет, шумит на просторе…

Красиво, правда? Вот если бы это разрешение экрана было установлено у всех пользователей! Но, увы! Стоит мне увеличить разрешение до 1152 х 864 и получается уже следующая картина:

Печально я гляжу на это отраженье.

Согласитесь, это совсем не то, что хотелось. Конечно, красота требует жертв, и вы можете спокойно откинуть тех пользователей, чье мнение о разрешении экрана не совпадает с вашим, либо предложить им выбрать настройки, которые вы им укажете. Решать, в конечном счете, только вам.

Хотя бывает красота и без жертв. Которая великолепно будет смотреться на всех мониторах без исключения. И я попытаюсь в этом помочь. Как вы заметили, фон заполняется копиями рисунка. И этим свойством не грех и воспользоваться. Мы ведь можем сделать одну маленькую картинку, которая займет памяти намного меньше большой, и заполним ею весь экран. Тут главная хитрость постараться сделать эту картинку «без швов». То есть, чтобы не было видно стыков между соседними изображениями. И для этого нам опять понадобится незаменимая программа Adobe Photoshop.

Конечно, можно особо и не утруждаться, и взять готовые фоновые картинки из Интернета, где они просто кишмя кишат. Для этого можно набрать в любой поисковой системе (www.yandex.ru, www.apport.ru, www.ramber.ru и многих других) заветные слова (фон, фоновые обои, background) и к вашим услугам предстанут десятки и десятки сайтов, готовые отдать вам эти фоны за ради бога, и что особо радует, совершенно бесплатно.

Только не удивляйтесь потом, что точно такой фон вы найдете и на других сайтах. Так что если вы хотите сделать что-то, пусть и сопливое, но СВОЕ, предлагаю закатать рукава, и взяться за дело. Тем более это очень увлекательное занятие, от которого просто трудно оторваться.

Свойство CSS background

Свойство CSS background задает фон на html сайте. Также с помощью него можно задавать фоны как отдельным элементам сайта (например, какой-то области, шапке сайта, колонки и т.п.), так и всему сайту целиком. Это свойство имеет множество атрибутом и нюансов. Разберем все на примерах и научимся делать как монотонные фоны, так и фоновые картинки на сайте.

1. Синтаксис CSS background

• background-attachment — задает точку привязывания отчета
• background-color — монотонный цвет фона (можно задавать в формате #RGB, названием цвета и в формате rgb());
• background-image — задание фоновой картинки;
• background-position — позиция элемента (сдвиг относительно левого верхнего края);
• background-repeat — задание повторения элемента (можно задавать повтор по осям, а также указать бесконечное количество повторов);

2. Как сделать фон на сайте html

Разработка дизайна сайта должна начинаться с определения общего цветового фона. Ведь фон это редко меняемая часть сайта, которая будет видна всегда. Очевидно, что такая важная деталь должна быть в гармонии с цветовой палитрой всего сайта.

При создании фона для сайта самое главное определиться с вопросом о том, будет ли сайт растягиваться на весь экран (резиновый дизайн) или будет фиксированной ширины. Конечно, лучше сделать так, чтобы дизайн сайта и в далеком будущем на больших разрешениях мониторов отображался также красиво, но с другой стороны, чтобы при этом сайт не был сильно растянут.

Лично я всегда выбираю такие шаблоны для сайта, чтобы ширина видимой части контента была не больше 1024 символов. Если посмотреть статистику сайта, то такое разрешение удовлетворяет большой процент пользователей. В будущем это число будет уменьшаться, т.к. новые мониторы с высоким разрешением вытесняют старые (например, full-hd есть почти у каждого).

В качестве фона можно использовать либо монотонный цвет, либо фоновое изображение. У каждого способа есть свои плюсы и минусы. Монотонный цвет не будет нагружать сайт загрузкой лишнего изображения, но и дизайн сайта не будет столь эффектным, как это можно было бы сделать с применением фонового изображения.

Рассмотрим все варианты по заданию фона на сайте.

3. CSS background-color — монотонный фон на сайте

Свойство CSS background-color — задает цвет фона. Например:

В этом случае задан цвет фона всему сайту, поскольку мы его применили к тегу

Еще пример. Зададим тегу по умолчанию зеленый фон:

Всю палитру цветов в кодах на html Вы сможете найти тут.

Аналогичное свойство есть у html-таблиц, но называется оно bgcolor

4. CSS background-image — фоновая картинка на сайте

Свойство CSS background-image — позволяет установить фоновое изображение на сайте.

Синтаксис CSS background-image

Например, для установки общего (глобального) фона:

Например фоновая картинка:

После двоеточия указывается адрес изображения. Можно использовать как относительный так и прямой адрес.

В CSS3 можно задать несколько фоновых изображений (они как бы накладываются друг на друга как слои).

Задавая фон в виде картинки есть возможность настраивать так же ряд важных свойств CSS

• background-repeat
• background-attachment
• background-position
• background-size
• background-clip

Рассмотрим в отдельности эти параметры

4.1. CSS background-repeat

Свойство CSS background-repeat определяет повторять ли фон. Можно отдельно настраивать повторение по вертикали и горизонтали.

Синтаксис CSS background-repeat

Где value может принимать следующие значения:

• repeat-x — повторять фоновое изображение по горизонтали;
• repeat-y — повторять фоновое изображение по вертикали;
• no-repeat — не повторять фоновое изображение;
• repeat (по умолчанию) — повторять фоновое изображение по горизонтали и вертикали;
• space — все пространство заполняется максимально возможным количеством изображений, первое и последнее (по горизонтали и вертикали) поровну обрезаются;
• round — аналогично предыдущему, с тем отличием, что первое и последнее масштабируются для заполнения;

Например, по горизонтали не повторять, по вертикали повторять фоновое изображение:

4.2. CSS background-attachment

Свойство CSS background-attachment задает привязки фона изображения. Можно зафиксировать задний фон, чтобы при прокрутке скроллом он не крутится или же наоборот фон будет прокручиваться вместе с сайтом.

Синтаксис CSS background-attachment

Где value может принимать следующие значения:

• scroll (действует по умолчанию) — фон прокручивается вместе с сайтом;
• fixed — при прокрутке скролла фон остается неизменными;
• local — изображение прокручивается с контентом, но не с элементом, его содержащим;

Я думаю, что Вы видели такие сайты и понимаете о чем идет речь.

4.3. CSS background-position

Свойство CSS background-position задает расположение фона относительно левого верхнего угла.

Синтаксис CSS background-position

В параметрах мы указываем выравнивание (смещение) в пикселях или процентах сначала по оси Х, потом по оси У. value , value2 может принимать следующие значения:

• top — выравнивание по верхнему краю;
• left — выравнивание с левого края;
• right — выравнивание с правого края;
• bottom — выравнивание по нижнему краю;
• center — выравнивание по центру;
• число/проценты — можно задавать отступ в виде числа или процентов;

По умолчанию фон располагается в верхнем левом углу.

Можно указывать в пикселях Npx задание отступа от разных краев. Проще понять это на примере:

Фон будет выравнивать по правому краю со смещением 50 пикселей вниз.

Или например сместим фон на 100px вправо и расположим его по центру относительно высоты.

Все эти параметры можно задать в таблице стилей CSS. Этот параметр выравнивает расположение фона на странице.

4.4. CSS background-size

Свойство CSS background-size позволяет задавать размеры фона.

Синтаксис CSS background-size

Где первый параметр задает значение по оси Х, второй параметр по оси У. Можно задавать как в процентах, так и пикселях.

Похожие публикации:

1. В чем разница кнопок html
2. Для чего создаются html формы
3. Как в brackets вставить быстрый код html
4. Как в html увеличить текст

Как добавить фоновое изображение в css

CSS 3 предлагает ряд новых инструментов а так же расширяет возможности старых свойств предназначенных для работы с фоном.

Вставка нескольких фонов.

В СSS 3 появилась возможность одновременно использовать сразу несколько фоновых изображений для одного и того же элемента. Делается это с помощью уже знакомого нам свойства background-image с тем лишь отличием, что теперь можно указывать не один, а сразу несколько адресов к разным картинкам перечисляя их через запятую.. синтаксис такой:

background-image: url(fon1.jpg), url(fon2.jpg), url(fon3.jpg);

То изображение что идёт в списке первым будет находится поверх других остальные же будут подкладываться под него в том порядке в котором они перечислены.

При использовании в качестве фона нескольких изображений к ним так же можно применять дополнительные свойства для работы с фоном такие как: background-attachment, background-repeat, background-position и т.д. Значения для этих свойств, в случае если картинок несколько, тоже же указывается через запятую, где первое значение предназначено для первого фона второе для второго и т.д.

Размер фонового изображения.

Теперь с помощью нового свойства background-size можно указывать размер изображения выступающего в качестве фона. Указывать размер ширины и высоты фоновой картинки можно с помощью следующих значений:

• px — В пикселях или любых других единицах измерения принятых в СSS.
• % — в процентах от размеров элемента которому назначается фон. li>
• cover – Растягивает фоновое изображение на весь блок.
• contain – Растягивает фоновое изображение с сохранением пропорций до тех пор, пока его ширина или высота не упрётся в края блока.
• auto — Исходный размер изображения (по умолчанию). В случае если значение auto присвоено только одной из сторон, то её размер вычисляется относительно размера второй стороны с указанным размером.

Повторение фонового изображения.

Ранее мы с Вами уже знакомились со свойством background-repeat которое определяет по какому принципу фоновое изображение будет дублироваться в том или ином блоке. Напомню, что свойство background-repeat согласно спецификации CSS 2.1 могло принимать следующие значения:

• no-repeat — запретить повторение, показать только одно изображение.
• repeat — повторять изображение (по умолчанию).
• repeat-x — повторять только по горизонтали.
• repeat-y — повторять только по вертикали.

Так вот в спецификации CSS 3 для данного свойства добавилось ещё два весьма интересных значения, которые определяют, что делать в случаях, когда крайние изображения выкладываемые «плиткой» не помещаются в заданные размеры блока (по умолчанию они обрезаются):

• space – Между фоновыми изображениями выкладываемых «плиткой» равномерно добавляются пустые пространства, так чтобы в блоке поместилось максимальное количество целых рисунков.
• round – Дублируемые фоновые изображения масштабируются до тех пор пока крайние рисунки целиком не впишутся в заданные размеры.

Думаю на примере будет понятнее:

Жалко конечно, но значения round и space на данный момент поддерживаются только браузерами IE9+ и Opera 11+..

Фон и боксовая модель.

С помощью нового свойства background-origin можно определять область позиционирования фона в том или ином блоке.

Возможные значения такие:

• padding-box — Фон позиционируется от краёв блока.
• border-box — Фон позиционируется от границ блока.
• content-box — Фон позиционируется от полей блока.

Свойство background-origin не применяется, если значение background-attachment задано как fixed .

Браузеры Chrome 3.0, Safari5.0 и их более ранние версии поддерживают данное свойство используя префикс -webkit-background-origin .

Браузер Firefox вплоть до версии 4.0 так же работает только со своим префиксом -moz-background-origin .

Так же в спецификацию CSS3 вошло новое свойство background-clip которое определяет что делать с фоновым изображением или цветом фона если оно наплывает на границы блока.

Значения могут быть следующими:

• padding-box — Фон не отображается под границами блока.
• border-box — Фон отображается под границами блока.
• content-box — Фон отображается только внутри контента.

Как и в случае со свойством background-origin эффект применения будет заметен если использовать толстые пунктирные или прозрачные границы.

Браузеры Safari и Chrome используют данное свойство с префиксом -webkit-background-clip , а Firefox 4.0 и ниже -moz-background-clip .

Браузер Opera вплоть до версии 12.0 не поддерживает значение content-box .

Что бы не возникало вопросов покажу пример в котором наглядно демонстрируются отличия свойства background-origin от свойства background-clip .

Итак, как говорится, найдите 10 отличий:

Полезные советы:

Работая одновременно с несколькими фонами CSS код можно формировать с помощью базового свойства background выглядеть это будет так:

— такая запись являться аналогом той, которую мы с Вами разобрали в примере выше:

Похожие публикации:

1. Как выставить блоки в одну строку css
2. Как деформировать div css background
3. Как убрать отступы у блока в css
4. Как убрать рамку в css

Как сделать фоновую картинку в HTML

Верстка HTML и CSS

На чтение 3 мин Просмотров 763 Опубликовано 01 марта 2023

Изображения могут придать странице более привлекательный вид. Одним из таких способов сделать страницу более привлекательной является добавление на нее фонового изображения. Добавить фоновое изображение в HTML можно двумя способами: атрибутом Background (HTML) или через CSS. Но прежде чем мы начнем изучать различные методы добавления фонового изображения в HTML, давайте пройдемся по списку тем, перечисленных в оглавлении, которые мы рассмотрим в этой статье.

Как добавить фоновое изображение в HTML

Добавить фоновое изображение в HTML можно двумя способами:

• Атрибут Background (HTML)
• Внутренняя таблица стилей (CSS)

Давайте подробно рассмотрим каждый из этих методов в следующем разделе.

Атрибут фона

Если вы хотите добавить фоновое изображение в HTML с помощью атрибута background, выполните следующие действия:

• Откройте HTML-файл в текстовом редакторе.
• В начальном теге вашего HTML-файла введите .
• Укажите путь к изображению, которое мы хотим добавить. (например, .
• Сохраните HTML-файл в текстовом редакторе и запустите его.

Давайте рассмотрим пример, чтобы лучше понять шаги. Вот HTML-файл:

Когда вы выполните этот код, результат будет выглядеть следующим образом:

“C:\Users\Downloads\infoedge.jpg”, это путь к изображению, где оно было сохранено на устройстве. Замените путь в соответствии с расположением файла, сохраненного на вашем устройстве. А если вы хотите добавить изображение из интернета, используйте для этого URL-адрес изображения.

Внутренняя таблица стилей (CSS)

Если вы хотите добавить фоновое изображение с помощью внутренней таблицы стилей (CSS), выполните следующие действия:

• Откройте HTML-файл в текстовом редакторе.
• После закрытия тега в HTML-документе определите начальный и конечный теги тега .Введите в тег style свойство элемента body , а затем свойство backgroud-image .
• Сохраните HTML-файл в текстовом редакторе и запустите его.

Давайте рассмотрим пример, чтобы лучше понять шаги. Вот HTML-файл, созданный в соответствии с приведенными выше шагами:

Когда вы выполните этот код, результат будет выглядеть следующим образом:

В приведенном выше HTML-коде мы использовали изображение из Интернета, используя URL-адрес изображения.

Как повторить фоновое изображение в HTML?

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

Если вы не хотите, чтобы фоновое изображение повторялось, установите свойство background no-repeat .

Как покрыть весь элемент фоновым изображением в HTML?

Чтобы покрыть фоновым изображением весь элемент, можно установить свойство background-size в значение cover . А если вы не хотите, чтобы изображение растягивалось, можно задать свойству background-attachment значение fixed . Это позволит охватить весь элемент или страницу без растягивания.

Давайте рассмотрим пример, чтобы лучше понять это:

На выходе получится примерно следующее:

В этой статье мы рассмотрим, как добавить фоновое изображение в HTML. Если остались вопросы, задавайте их в комментариях ниже.

Как адаптировать фоновое изображение

] Понимаю что скорее всего неправильно задаю высоту обоих блоков, но по другому не знаю как сделать

Отслеживать
задан 27 ноя 2022 в 16:39
1 1 1 бронзовый знак

по вашему коду и скрину ничего не понять. background-size: contain; — что бы не обрезалась. background-size: cover; для того что бы растянулась по пропорциям.

27 ноя 2022 в 17:02
Я пытался уже это делать, но ничего кроме обрезания изображения не меняется
27 ноя 2022 в 17:04
какое изобр вас беспокоит? телефон или нижнее? и какой результат должен быть, если про нижнее?
27 ноя 2022 в 17:07
Надо нижнее изображение растянуть на всю ширину и высоту вьюпорта, учитывая хедер
27 ноя 2022 в 17:11
посмотрите ответ
27 ноя 2022 в 17:21

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

body < margin: 0; padding: 0; box-sizing: border-box; >header < height: 100px; text-align: center; position: fixed; top: 0; left: 0; width: 100%; border: 3px solid red; z-index: 2; box-sizing: border-box; >.first-block < width: 100vw; height: calc(100vh - 100px); margin-top: 100px; background-image: url(https://shutterstock--c.na60.content.force.com/servlet/servlet.ImageServer?id=0150c0000049g7B&oid=00D30000001GgSC&lastMod=1501874864000); background-repeat: no-repeat; background-position: center; background-size: cover; >

 
header
 

Отслеживать
ответ дан 27 ноя 2022 в 17:20
EkaterinaRatatui EkaterinaRatatui
316 1 1 серебряный знак 10 10 бронзовых знаков

Вы меня не правильно поняли, картинка должна быть на всю высоту и ширину вьюпорта учитывая хедер, который 100px (то есть высота вьюпорта -100px)

27 ноя 2022 в 17:29
@Jonsik посмотрите, я исправила
27 ноя 2022 в 17:51
Просто пропадает картинка
27 ноя 2022 в 17:54

:root < --header-height: 100px; >body < margin: 0; >header < height: var(--header-height); text-align: center; position: sticky; top: 0; left: 0; width: 100%; z-index: 99; background-color: rgba(255,255,255,.9); >.hero < width: 100%; min-height: calc(100vh - var(--header-height)); background: #555 url(https://placeimg.com/1000/1000/arch) no-repeat center top / cover; >.about

header
 

Отслеживать
ответ дан 27 ноя 2022 в 17:41
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
Изображение просто исчезло
27 ноя 2022 в 17:44
@Jonsik — обновил
27 ноя 2022 в 18:07

Картинка становиться во весь экран и обрезается хедером, а надо что бы был сверху хедер и ниже блок about с этой картинкой во весь остальной экран

27 ноя 2022 в 18:55
Увидел, что вы изменили, но у меня с таким кодом адаптируется примерно до 850px
27 ноя 2022 в 19:51
А все спасибо, понял свою ошибку. Это происходило из за того что я еще не адаптировал хедер
28 ноя 2022 в 7:06

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.