Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.
Рис. 6.3. Ширина шапки
Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру элемента .
header < display: block; /* Для старых браузеров */ height: 405px; /* Высота шапки */ background: url(images/header-bg.png) no-repeat center bottom; >
В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.
Рис. 6.4. Совмещение изображения по горизонтали
На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).
На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).
Рис. 6.5. Фоновая картинка для шапки
В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.
Оптимизация шапки
Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.
Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.
Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)
Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.
Два рисунка для фона шапки подготовлены, пишем код HTML.
В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.
Название сайта
Название написано на облаке с растушёванными краями, что должно создать трудности при наложении на градиент. Есть два способа, как их обойти.
Использовать формат PNG-24 при сохранении прозрачности.
Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.
Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.
Выравнивание по центру делается через свойство text-align , добавляемое к родителю тега , а сдвиг вниз через свойство top . Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative .
На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:
Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.
Окончательный код для шапки приведён в примере 6.14.
Пример 6.14. Шапка сайта
HTML5 CSS 2.1 IE Cr Op Sa Fx
Как поймать льва в пустыне?
Для того чтобы поместить один элемент под другой нужно отталкиваться от концепции контекста наложения. Если элемент имеет позицию отличную от static , то к нему применим z-index, свойство позволяющее перемещать элемент выше или ниже относительно его текущего "слоя".
Ниже простой пример применения вышеописанного на примере Вашего исходного кода:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Take me there
Отслеживать
ответ дан 27 июл 2020 в 22:09
11.5k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков
Нужно сделать родительской блок, у которого будет position: relative , внутри этого блока вы можете создать position: absolute элемент, давать им разные z-index и они будут вставать в нужной очередности. В данном примере я использовал псевдоэлемент ::after к блоку .intro , у которого стоит position:relative . Псевдоэлементу я задал postion: absolute и z-index: -1 , таким образом, он стал ниже всех других элементов.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus aliquam cum optio suscipit eligendi voluptatem odio in. Excepturi, ut.
Take me there
Как в шапку поместить логотип или просто картинку?
Каким образом в место обычного цветового фона в шапке можно сунуть картинку или логотип? Я пробывал background-image: url(путь до png файла) ; но шапка просто становилось белой и все.
4 ответов
Здесь было: https://fructcode.com/ru/qa/logotip-r5hhbw/
Можно использовать просто background свойство с картинкой, типа такого:
background-image: url("myimage.jpg"); /* Фоновая картинка */ background-color: #cccccc; /* Если картинка недоступна использовать такой цвет для фона */ height: 350px; /* Высота картинки */ background-position: center; /* Позиционировать по центру */ background-repeat: no-repeat; /* Не повторять картинку */ background-size: cover; /* Растягивать картинку на весь контейнер */
А как поставить вместо background-color: black; фоновую картинку? В видео уроке по html,css я не увидел данного действия
.header
ААА)))) Я хотел уже начать писать почуму-то у меня не встает картинка фона. Я так и раньше делал и не выходило подумал может спросить задать вопрос)) А оказывается я путь не так писал. Я сначало не догнал что css файел лежит в assets/css я же в нем прописываю))) Нужно было путь писать отталкиваясь от папки css)) Спасибо за помощь))
Способы добавления изображения в header
Наличие изображения в header необязательное условие в создании сайта. Но с его помощью заголовок выглядит намного привлекательнее. Вставить изображение в шапку сайта можно как фон и как картинку, добавить к нему различные эффекты анимации. Рассмотрим некоторые способы добавления изображения в header для HTML-сайта и сайта на WordPress.
Замена текста изображением в заголовке
Иногда мы хотим добавить немного декоративных элементов в название сайта, мы можем достичь этого с помощью только CSS. В этом случае текст заголовка можно полностью заменить на изображение. Но с точки зрения семантики, оно не несет никакой информативности, поэтому стоит задача оставить в HTML-коде текст заголовка, но скрыть его от посетителей с помощью стилей.
Данный пример считается правильным, так как иногда изображение может не загрузиться и посетитель сможет увидеть текстовое название сайта, в отличии от полного сокрытия текста.
Так выглядит HTML код заголовка:
Создадим для header псевдоэлемент ::before и с помощью свойства background укажем ссылку на выбранное изображение.
Если всё-таки надо показать текст заголовка, то добавим прозрачности картинке используя свойство opacity и не забудьте задать стили для оформления текста:
Изображение в заголовке с эффектом параллакса на чистом CSS без использования JavaScript
Параллакс эффект часто используется для изображения в header. Обычно используются скрипты для создания эффекта прокрутки, что может замедлить загрузку сайта. Этот легкий параллакс работает на одном CSS украсит статью вашего блога.
Мой блог
Заголовок с CSS Параллакс
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Добавление изображения в header на сайте WordPress — функция custom-header
В теме WordPress, если она имеет поддержку пользовательских заголовков, изображение шапки легко добавить прямо в настройщике (кастомайзере). Подключается заголовок функцией:
add_theme_support( 'custom-header' );
Если в теме нет поддержки custom-header, тот этот код надо вставить в файл functions.php. Чтобы задать картинке точные размеры (ширину и высоту) нужны дополнительные аргументы, тогда функция будет выглядеть таким образом:
$defaults = array( // Изображение по умолчанию (пусто если нет изображения). 'default-image' => '', // Установите высоту и ширину, с максимальным значением для ширины. 'height' => 200, 'width' => 750, 'max-width' => 750, // Поддержка гибкой высоты и ширины. 'flex-height' => true, 'flex-width' => true, // Случайное вращение изображения по умолчанию. 'random-default' => false, ); add_theme_support( 'custom-header', $defaults ); >
Теперь можно вывести изображение в заголовке сайта, а также указать атрибуты микроразметки Schema, ширину и высоту, alt-текст, показать название сайта при наведении на картинку, добавить ссылку на главную страницу.
Этот код надо добавить в файл header.php. Если вам не нужен код микроразметки Schema, то не забудьте его удалить из функции.
В том случае, если вы хотите использовать изображение заголовка в качестве фона, тогда в функции custom-header параметры (аргументы) задавать нет необходимости. Код в файле header.php будет таким.
Загрузите картинку в папку темы /images/header-image.jpg и в файле CSS добавьте такой код:
header < background: url(/images/header-image.jpg) no-repeat top center; >
