Как наложить картинку на header?
Как мне такое сделать? (картинку на header) Код моей шапки:
Отслеживать
задан 29 дек 2021 в 7:40
3 3 3 бронзовых знака
может не надо думать как впихать картинку именно в шапку, и в целом поразмышлять куда ее стоит добавить?
29 дек 2021 в 7:50
@teran вообще, думал о том чтобы её вставить в блок ниже, но как её потом на header «задвинуть»?
29 дек 2021 в 7:57
Вопрос такой — при скролле меню будет фиксированное к верху страницы или нет? от этого зависит как можно реализовать ваш пример
29 дек 2021 в 7:59
@klifort нет, нефиксированное
29 дек 2021 в 8:01
Я б header оставил как есть а блок с картонкой и текстом добавил следующим, и к нему добавил margin-top c минусовым значением высоты блока header
29 дек 2021 в 8:03
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Если header position: static (т.е. не должен прилипать к верху экрана), то просто разбейте блок на две части. Пример на bootstrap:
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 
Header
Content
[РЕШЕНО] Как картинку вставить в header
На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.
Как в шапку поместить логотип или просто картинку?
Каким образом в место обычного цветового фона в шапке можно сунуть картинку или логотип? Я пробывал background-image: url(путь до png файла) ; но шапка просто становилось белой и все.
4 ответов
Здесь было: https://fructcode.com/ru/qa/logotip-r5hhbw/
Можно использовать просто background свойство с картинкой, типа такого:
background: url(myimage.jpg);
или background-image:
background-image: url("myimage.png"); background-color: red;
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)) Спасибо за помощь))
Шапка страницы
Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 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 (повторение по горизонтали).
header < display: block; height: 405px; background: url(images/header-bg.png) repeat-x center bottom; >
На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).
Рис. 6.5. Фоновая картинка для шапки
В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.
Оптимизация шапки
Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.
Рис. 6.6. Градиентный рисунок (header-gradient.png)
Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.
Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)
Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.
Два рисунка для фона шапки подготовлены, пишем код HTML.
И стиль для элемента и слоя header-bg .
header < background: #00b0d8 url(images/header-gradient.png) repeat-x; >.header-bg < background: url(images/header-animal.png) repeat-x center bottom; height: 405px; >
В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.
Название сайта
Название написано на облаке с растушёванными краями, что должно создать трудности при наложении на градиент. Есть два способа, как их обойти.
- Использовать формат PNG-24 при сохранении прозрачности.
- Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.
Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.
header < background: #00b0d8 url(images/header-gradient.png) repeat-x; >.header-bg < background: url(images/header-animal.png) repeat-x center bottom; height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ >.header-bg img < position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ >
Выравнивание по центру делается через свойство text-align , добавляемое к родителю тега ![]()
, а сдвиг вниз через свойство top . Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative .
На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:
Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.
Окончательный код для шапки приведён в примере 6.14.
Пример 6.14. Шапка сайта
HTML5 CSS 2.1 IE Cr Op Sa Fx
Как поймать льва в пустыне?
Похожие публикации: