Способы добавления изображения в header

Способы добавления изображения в header

Наличие изображения в header необязательное условие в создании сайта. Но с его помощью заголовок выглядит намного привлекательнее. Вставить изображение в шапку сайта можно как фон и как картинку, добавить к нему различные эффекты анимации. Рассмотрим некоторые cпособы добавления изображения в header для HTML-сайта и сайта на WordPress.

Замена текста изображением в заголовке.

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

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

HTML
<h1 class="site-title">
<span></span>Мой блог
</h1>
CSS
h1 {
	position: relative;
	overflow: hidden;
	width: 350px;
	height: 75px;
	margin: 0;
	padding: 0;
}

.site-title span {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	display: block;
	width: 350px;
	height: 75px;
	margin: 0;
	padding: 0;
	background: url(../images/header-image.jpg) top left no-repeat;
}

Но надо сказать, что этот метод не подойдет, если вам надо добавить прозрачности для background, тогда используйте следующий код.

HTML
<h1 class="site-title">
  Мой блог
</h1>

CSS
h1 {
	width: 350px;
	height: 75px;
	text-indent: -9999px;
	background: url(../images/header-image.jpg);
}

Parallax эффект на CSS.

Parallax эффект на CSS

Параллакс эффект часто используется для изображения в header. Обычно используются скрипты для создания эффекта прокрутки, что может замедлить загрузку сайта. Этот легкий параллакс работает на одном CSS.

HTML
<main>
	<header>
		<a href="#">
			<h1>Мой блог</h1>
			<p>Заголовок с CSS Параллакс</p>
		</a>
	</header>
	<section>
		<p>Эффект параллакса на чистом CSS без использования JavaScript и jQuery.</p>
	</section>
</main>
CSS
main {
	font: 36px/1.6 Open Sans, serif;
	overflow-x: hidden;
	height: 150vh;
	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;
	height: 60vh;
	-webkit-transform: translateZ(-1px) scale(2);
	transform: translateZ(-1px) scale(2);
	-webkit-transform-origin: center top;
	transform-origin: center top;
	vertical-align: top;
	background: url(https://archive.org/download/dufffanart/fanart.jpg);
	background-position: center center;
	background-size: cover;
}

header p {
	font-size: 1em;
	font-weight: 300;
	padding: 0 20px;
	text-align: center;
	color: white;
}

a {
	text-decoration: none;
}

section {
	min-height: 200vh;
	padding: 10px 0;
	transform: translateZ(0);
	background: white;
	color: black;
}

h1 {
	font-size: 2em;
	font-weight: 400;
	padding: 10px 20px;
	text-align: center;
	color: white;
}

Добавление изображения в header на сайте WordPress. Функция custom-header.

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

PHP
add_theme_support( '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.

<?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 ) )
?>

В том случае, если вы хотите подключить изображение заголовка на сайте WordPress как фон, тогда в функции custom-header параметры задавать нет необходимости. Код в файле header.php будет таким.

PHP
<header itemscope itemtype="https://schema.org/WPHeader">
<?php if (!is_home()): ?>
	<span id="site-title" itemprop="name"><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" itemprop="name"><?php bloginfo('name'); ?></h1>
<?php endif; ?>
	<p class="site-description" itemprop="description"><?php bloginfo('description'); ?></p>
</header>
CSS
header{
	background: url(/images/header-image.jpg) no-repeat top center;
}

 

СтраUz
Читайте также
Привет! Я Натали Мамбетова.

Занимаюсь разработкой сайтов, блогов, интернет-магазинов, лендингов на WordPress. Оказываю платные помощь и консультации. Являюсь сертифицированным партнером TemplateMonster по CMS системе WordPress, имею сертификат этой компании подтверждающий мои навыки в работе с данной системой.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© СтраUz 2018. Все права защищены. Копирование разрешено только с указанием гиперссылки на источник.
Сделано с ❤
Заказать сайт