Css style header image

Способы добавления изображения в 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 и не забудьте задать стили для оформления текста:

Изображение в заголовке с эффектом параллакса на чистом 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"> 

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

Загрузите картинку в папку темы /images/header-image.jpg и в файле CSS добавьте такой код:

Не забудьте указать размеры background.

Источник

64 CSS Headers and Footers

Collection of free HTML/CSS header and footer code examples: sticky, fixed, etc. Update of April 2019 collection. 5 new items.

Table of Contents

Related Articles

Article Headers

Author

Links

Made with

About the code

Non Rectangular Headers

Non-Rectangular header with inline SVG.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Curve Header

Author

Links

Made with

About the code

Header Image Parallax Scrolling Effect with CSS

Create a parallax scrolling effect using CSS background-image position. This script works when the header image is positioned at the top of the page.

Author

Links

Made with

About the code

Fixed Angled Header

This pen shows how CSS pseudo-elements and transforms can be used to create a fixed, angled header with an image background.

Author

Links

Made with

About the code

Skewed Header

Skewed header with HTML and CSS.

Author

Links

Made with

About the code

Curve SVG Background Animation

Curve SVG background animation for header.

CSS Animated Header

Animated blog header background image, no JavaScript.
Made by Nodws
May 30, 2017

Slanted Div, Fixed Header

Skewed divs and parallax effect created by fixed header. Simple layout and instructions for modification in the JS!
Made by Andrew Bales
January 10, 2017

CSS Header

HTML and CSS fixed disappearing scrolling header.
Made by Dudley Storey
December 3, 2016

Multi-Layered Parallax Illustration

HTML, CSS and JavaScript multi-layered parallax illustration.
Made by Patryk Zabielski
April 27, 2016

Hero Idea

Hero idea in HTML, CSS and JavaScript.
Made by Jake Lundberg
April 6, 2016

Headings/Hero Image Typography Playground

Explanation is at the top of CSS file. Just some typefaces, helper classes and few presets for easily testing headings typography.
Made by Mirko Zorić
March 18, 2016

Hero Zoom On Scroll

Simple zoom effect using window scroll to adjust some CSS.
Made by Derek Palladino
October 8, 2015

Neat Parallax Hero Effect

Some JavaScript magic to make this nifty little parallax hero.
Made by Dominic Magnifico
September 22, 2015

Fixed Post Header

Fixed header for each post with HTML, CSS and JavaScript.
Made by White Wolf Wizard
August 5, 2015

CSS Parallax Header Image

HTML and CSS parallax header image.
Made by Bennett Feely
November 18, 2014

Fullscreen Headers

Author

Links

Made with

About the code

Hover Effect for Headers

8 hover effects for header in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Header / About Page

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Header for Landing Page

Header for landing page using clip-path .

Author

Links

Made with

About the code

Sexy Animated Rainbow Waves Header

Just a little front-end UI experiment.

Hero Image Showcase

Hero image showcase with HTML, CSS and JS.
Made by Art
May 27, 2017

Hero Effect–Magazine

A hero image that uses height: 100vh to cover the entire screen for a magazine cover effect. When scrolled, it has a subtle animation similar to opening a magazine.
Made by Cameron Campbell
November 15, 2016

Flexbox Hero Header

Simple parallax hero header with flexbox.
Made by Ana Vicente
April 5, 2016

Simple Parallax Header

HTML, CSS and JS simple parallax header with blur.
Made by tsimenis
April 5, 2016

Hero OnScroll

HTML, CSS and JS hero on scroll.
Made by verdzik
November 9, 2015

Fullscreen Header With Background Color Cycle

Fullscreen header with background color cycle in pure CSS.
Made by Kenny Sing
November 17, 2014

Continuous Scrolling Background Of Sticky Header

Continuous scrolling background of sticky header in HTML, CSS and JavaScript.
Made by Robert Borghesi
September 17, 2014

Fixed (Sticky) Headers

Author

Links

Made with

About a code

Blurry Header

Progressive backdrop blur experiment.

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Links

Made with

About a code

Just A Simple Header Bar

Just a really simple pure CSS header bar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Sticky Headers

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Sticky Header On Scroll

High performance sticky header with shadow on scroll.

Responsive Scrolling Sticky Header

Using element queries to power a layout with a cover image and a nav that sticks to the top of the page on scroll.
Made by Tommy Hodgins
April 9, 2017

Scroll Header

Really smooth on mobile/touch enabled devices.
Made by Blake Bowen
February 11, 2017

Responsive Scroll Header

Responsive scroll header in HTML, CSS and JavaScript.
Made by Dylan Macnab
December 28, 2015

Animate Header In/Out After Scrolling

Using jquery-waypoints, well be checking to see when data-animate-header (this section) is above the top of screen, then animate data-animate-header (the fixed header) in/out accordingly. We’re able to do this with css transitions and a combo of 3 classes ( .header-past , .header-show , .header-hide ) — without having to clone or do any dom manipulating.
Made by antwon
June 16, 2015

Header Fade

HTML, CSS and JavaScript header fade.
Made by Emmanuel Pilande
March 7, 2015

Fixed Header Scroll Effect And Smart Nav For One-Page Sites

Rudimentary combination of jQuery fixed header on scroll and nav active section class effect.
Made by Summer
February 2, 2015

Auto Hide Sticky Header

Setting classes on the header with JavaScript.
Made by jasper
January 21, 2015

Sticky Header CSS Transition

Fun example of a sticky header utilizing some CSS3 transitions!
Made by Brady Sammons
October 23, 2014

Top Sliding Nav

Hidden nav that slides in from the top once the page is scrolled.
Made by Chris Gruber
October 20, 2014

Responsive Sticky Header Navigation

Cool navigation with HTML, CSS and JS.
Made by MarcLibunao
June 8, 2014

Fixed Header (Quick Hack)

The header is not fixed with a solid background color and there is a fixed div at the top that is small. Then there is a div that is not fixed within the header with the title. Simply wanted to try and prototype the idea. Works in a decent hack-ish sort of way.
Made by Darcy Voutt
March 21, 2014

Sticky Header Visual Trick

Creates a sticky hacky sticker header using CSS without creating a scroll event handler.
Made by Michael
July 19, 2013

Video Headers

React Video Header

Simple React.js video header.
Made by Mark Sarpong
June 2, 2017

Video Header

Video header with HTML, CSS and JavaScript.
Made by Alex
February 6, 2017

Hero Video

A pen that shows how to create a hero with a background video.
Made by Chris Simeone
October 20, 2016

Fullscreen Background Video With Mix-Blend-Mode Overlay Text

Shows full-screen video with effective, legible text overlay using mix-blend-mode .
Made by Dudley Storey
September 8, 2016

Video Header Animation

Animation was customized used Adobe After Effects and rendered to be compatible across all browsers with .ogv and .webm files. Does not operate in mobile (intentionally). Bootstrap framework for HTML is used, no JavaScript needed.
Made by Sylvia Maguia
October 4, 2015

Responsive Video Header

Responsive video header with gradient in HTML and CSS.
Made by Jacob Davidson
May 29, 2015

Источник