Наличие изображения в header необязательное условие в создании сайта. Но с его помощью заголовок выглядит намного привлекательнее. Вставить изображение в шапку сайта можно как фон и как картинку, добавить к нему различные эффекты анимации. Рассмотрим некоторые способы добавления изображения в header для HTML-сайта и сайта на WordPress.
Замена текста изображением в заголовке
Иногда мы хотим добавить немного декоративных элементов в название сайта, мы можем достичь этого с помощью только CSS. В этом случае текст заголовка можно полностью заменить на изображение. Но с точки зрения семантики, оно не несет никакой информативности, поэтому стоит задача оставить в HTML-коде текст заголовка, но скрыть его от посетителей с помощью стилей.
Два способа сделать видеофон для сайта
Данный пример считается правильным, так как иногда изображение может не загрузиться и посетитель сможет увидеть текстовое название сайта, в отличии от полного сокрытия текста.
Так выглядит HTML код заголовка:
<header>
<h1 class="site-title">
Мой блог
</h1>
</header>
Создадим для 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 {
text-align: center;
text-transform: uppercase;
}
Если всё-таки надо показать текст заголовка, то добавим прозрачности картинке используя свойство 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 украсит статью вашего блога.
23 бесплатных инструмента для работы креативного веб-дизайнера и разработчика
HTML код:
<article>
<header>
<h1>
<a href="#">Мой блог
</a>
</h1>
<p>Заголовок с CSS Параллакс</p>
</header>
<div class="content">
<p>
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.
</p>
</div>
</article>
CSS код
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 {
min-height: 200vh;
max-width: 1024px;
margin: 0 auto;
padding: 50px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
background: white;
color: black;
font-size: 0.6em;
}
Добавление изображения в 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, то не забудьте его удалить из функции.
<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) { ?>
<span id="header_image" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img itemprop="url image" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>
<meta itemprop="width" content="<?php echo get_custom_header()->width; ?>">
<meta itemprop="height" content="<?php echo get_custom_header()->height; ?>">
</span>
<?php } // if ( ! empty( $header_image ) )
?>
В том случае, если вы хотите использовать изображение заголовка в качестве фона, тогда в функции custom-header параметры (аргументы) задавать нет необходимости. Код в файле header.php будет таким.
<header>
<?php if (!is_home()): ?>
<span id="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></span>
<?php else : ?>
<h1 class="site-title"><?php bloginfo('name'); ?></h1>
<?php endif; ?>
<p class="site-description"><?php bloginfo('description'); ?></p>
</header>
Загрузите картинку в папку темы /images/header-image.jpg и в файле CSS добавьте такой код:
header{
background: url(/images/header-image.jpg) no-repeat top center;
}
Не забудьте указать размеры background.