Картинка в шапке сайта
Добрый день! Есть такое задание: разместить в шапке сайта картинку в формате PNG на градиентном фоне. Столкнулась с проблемой, что картинка не накладывается на фон.
Вот что у меня получилось по стилям:
1 2 3 4 5 6 7 8
#header { background: url(back.png) 0% no-repeat, transparent linear-gradient(to left, #B51A1A, #FFFFFF) repeat scroll 0% 0%; background-size: 50% 100%; clear: both; padding: 15px 0; width: 100%; z-index: 99999; }
Размер картинки (если это важно) 2000*700px
Скажите, пожалуйста, что нужно изменить?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как сделать, чтобы картинка повторялась в шапке сайта?
Подскажите пожалуйста как в HTML сделать, чтобы картинка повторялась в шапке сайта?
Кнопка в шапке сайта
Как сделать так, чтобы кнопка адекватно помещалась в шапку сайта как на первой картинке (как на.
Подскажите по шапке сайта
Всем добрый вечер. Подскажите пожалуйста по верстке шапки сайта. Долго сидел с этим bootstrapo`м 4.
Кнопка в шапке сайта
Добрый вечер гуру веб-программирования, подскажите как добавить ещё 1 кнопку как на сайте "заказать.
38 / 27 / 12
Регистрация: 21.10.2017
Сообщений: 48
Для примера,
(прописать адрес изображения)
1 2 3 4 5 6 7
#header { background-image: url("URL-IMAGE"), linear-gradient(to left, #B51A1A, #FFFFFF); background-size: contain; background-repeat: no-repeat; background-position: center; height: 100px; }
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Плеер в шапке сайта
Вообщем на сайте http://promodj.com/dj1gagarin/promos/6160842/GAGARIN_FIRST_PR Интересный плеер.
Баннер в шапке сайта
Не могу допереть, как Сделать рекламный баннер над шапкой сайта с закрытием. Хочу что-то похожее на.
Виджеты в шапке сайта 3 фильтра
Почему 3 моих фильтра скрываются за товарами когда спускаешья в нижнию часть сайта помогите как.
Выравнивание меню в шапке сайта
Какими свойствами в css подогнать пиксель в пиксель шапку сайта?
Выравнять изображение в шапке сайта
Всем желаю доброго времени суток! Была задача воткнуть изображение по центру шапки, а так как на.
Адаптивная кнопка в шапке сайта
В шапку сайта добавили кнопку "заказ звонка" . Надо что бы она менялась на разных устройствах. сам.
[РЕШЕНО] Как картинку вставить в header
На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.
Способы добавления изображения в header
Наличие изображения в header необязательное условие в создании сайта. Но с его помощью заголовок выглядит намного привлекательнее. Вставить изображение в шапку сайта можно как фон и как картинку, добавить к нему различные эффекты анимации. Рассмотрим некоторые способы добавления изображения в header для HTML-сайта и сайта на WordPress.
Замена текста изображением в заголовке
Иногда мы хотим добавить немного декоративных элементов в название сайта, мы можем достичь этого с помощью только CSS. В этом случае текст заголовка можно полностью заменить на изображение. Но с точки зрения семантики, оно не несет никакой информативности, поэтому стоит задача оставить в HTML-коде текст заголовка, но скрыть его от посетителей с помощью стилей.
Данный пример считается правильным, так как иногда изображение может не загрузиться и посетитель сможет увидеть текстовое название сайта, в отличии от полного сокрытия текста.
Так выглядит HTML код заголовка:
Создадим для header псевдоэлемент ::before и с помощью свойства background укажем ссылку на выбранное изображение.
CSS код вставляем в файл стилей:
body, html < height: 100%; margin: 0; padding: 0; >header < width: 100%; height: 400px; margin: 0; padding: 0; >header::before < position: absolute; content: ""; top: 0; left: 0; display: block; width: 100%; height: 400px; margin: 0; padding: 0; background: url(https://source.unsplash.com/mf_3yZnC6ug) center no-repeat; background-size: cover; >.site-title
Если всё-таки надо показать текст заголовка, то добавим прозрачности картинке используя свойство opacity и не забудьте задать стили для оформления текста:
header::before < position: absolute; content: ""; top: 0; left: 0; display: block; width: 100%; height: 400px; margin: 0; padding: 0; background: url(https://source.unsplash.com/mf_3yZnC6ug) center no-repeat; background-size: cover; opacity: .4; >
Изображение в заголовке с эффектом параллакса на чистом 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.
body, html < margin: 0; padding: 0; height: 100%; font: 36px/1.6 Open Sans, serif; >article < overflow-x: hidden; height: 100vh; max-height: 100%; -webkit-perspective: 1px; perspective: 1px; -webkit-perspective-origin: center top; perspective-origin: center top; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; >header < position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 80vh; -webkit-transform: translateZ(-1px) scale(2); transform: translateZ(-1px) scale(2); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; vertical-align: top; background: url(https://source.unsplash.com/QzgVep0L8rw); background-position: center center; background-size: cover; background-repeat: no-repeat; padding: 0 20px; text-align: center; >header p < font-size: 1em; margin: 0; color: white; >h1 < font-size: 2em; font-weight: 400; margin: 0; padding: 0 20px; text-align: center; color: white; >a < text-decoration: none; color: white; >.content
Добавление изображения в 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, то не забудьте его удалить из функции.
" title="" rel="home"> ;%20?%3E)
// if ( ! empty( $header_image ) ) ?>
В том случае, если вы хотите использовать изображение заголовка в качестве фона, тогда в функции custom-header параметры (аргументы) задавать нет необходимости. Код в файле header.php будет таким.
Как мне такое сделать? (картинку на 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
Предыдущая запись