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

Наличие изображения в header необязательное условие в создании сайта. Но с его помощью заголовок выглядит намного привлекательнее. Вставить изображение в шапку сайта можно как фон и как картинку, добавить к нему различные эффекты анимации. Рассмотрим некоторые способы добавления изображения в 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

Параллакс эффект часто используется для изображения в 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. Если вам не нужен код микроразметки 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 ) )
?>

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

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>
CSS
header{
	background: url(/images/header-image.jpg) no-repeat top center;
}

 

наверх Do NOT follow this link or you will be banned from the site!