Растянуть фон по вертикали и горизонтали на всю ширину блока CSS
В документации сказано, что background-size:cover растягивает изображение так, чтобы оно по высоте и(или) по ширине было растянуто по всему блоку, но картинка растягивается только по ширине (в качестве фона использую картинку 1200×700). Если сделать экран очень маленьким в ширину, то виден пробел между фоном и концом блока. Можно ли как-нибудь сделать так, чтобы фон пропорционально растягивался и по ширине и по высоте. Я предполагаю, что изображение должно увеличиваться, если ему не хватает расстояния до одной из сторон.
Отслеживать
simply good
задан 30 окт 2016 в 21:47
simply good simply good
566 1 1 золотой знак 6 6 серебряных знаков 20 20 бронзовых знаков
Там, наверное, вначале сообщения должно быть background-size: cover;
2 дек 2017 в 0:54
Проверьте reset css. Возможно проблема в обнулении отступов и рамки
14 апр 2021 в 11:12
5 ответов 5
Сортировка: Сброс на вариант по умолчанию
background-size: 100% 100%; Если же мы напишем вот так background-size: 100%; то это интерпритируется как background-size: 100% auto; то есть высота будет выравниваться пропорционально, а нам это не нужно, по этому нужно явно указать что высота должна быть не авто а 100% от высоты блока. Изи катка
Отслеживать
ответ дан 11 авг 2019 в 10:58
Алексей Соснин Алексей Соснин
465 1 1 золотой знак 5 5 серебряных знаков 9 9 бронзовых знаков
Без воспроизводимого примера в вопросе сложно предположить в чем именно проблема. Вам подойдет именно background-size: cover; , он возможно не срабатывает по нескольким причинам. Например, само изображение фона содержит белые полосы, откройте изображение и посмотрите есть ли они там. Например, возможно, изображение не отцентрировано. Например, возможно другие стили перекрывают ваши, посмотрите в инспекторе. Или возможно сам блок, на который вы добавляете фон не на всю высоту или ширину нужного блока. Вот небольшой наглядный пример с фонами, возможно вам поможет:
span < display: inline-block; padding: 6px; color: #2d5857; font-family: sans-serif; font-weight: 600; font-size: 20px; background: white; margin: 6px; >div < color: white; height: 100vh; background-image: url(https://i.stack.imgur.com/WXyZl.jpg); border: 6px solid yellow; margin-bottom: 6px; >.bg_1 < background-position: center; >.bg_2 < background-size: cover; >.bg_3 < background-size: contain; >.bg_4 < background-size: cover; background-position: center; >.bg_5 < background-size: contain; background-repeat: no-repeat; background-position: center; >.bg_6
no styles background-position: center; background-size: cover; background-size: contain; background-size: cover;
background-position: center; background-size: contain;
background-repeat: no-repeat;
background-position: center; background-position: bottom 10px right 40px;
background-size: 60px 120px;
background-repeat: no-repeat; Стили заголовков в CSS: картинки, тени, анимации
Задача заголовка — привлекать внимание, и для этого многие эффекты хороши. В прошлый раз мы перевели статью о градиентах, теперь предлагаем рассмотреть ещё несколько фишек.
Как добавить изображение за текстом в CSS
Простая возможность: вместо того чтобы рисовать изображение или создавать градиенты, можно поместить на фон текста заголовка готовую картинку с помощью функции url().
Для начала выбираем картинку:
Используем свойство background-image и url() , чтобы добавить изображение в заголовок. Для настройки расположения также есть свойства background-size и background-repeat .
header h1 < font-size: 70px; font-weight: 600; background-image: url(/rockets.png); background-size: 250px; background-repeat: repeat; color: transparent; -webkit-background-clip: text; background-clip: text; >
Как добавить тени к тексту в CSS
Тень вокруг текста появляется благодаря свойству text-shadow :
text-shadow: 0px 4px 10px rgba(179, 147, 211, 0.8)В свойстве четыре значения:
- x-offset , расположение тени по горизонтали.
- y-offset , расположение тени по вертикали.
- Радиус размытия, который определяет, насколько тёмной будет тень.
- Цвет.
Text-shadow можно стилизовать так же, как свойство box-shadow. Но при работе с box-shadow меняется весь блок, а text-shadow подходит для точечной настройки каждой буквы.
Один из лучших способов добавить тени — наслоение. Вот как придать заголовку эффект многослойной тени:
text-shadow: 2px 2px 4px rgba(179, 147, 211, 0.1), 3px 4px 4px rgba(179, 147, 211, 0.15), 4px 6px 4px rgba(179, 147, 211, 0.2), 5px 8px 4px rgba(179, 147, 211, 0.25);
Вот что получится:
Используя многослойные тени, можно сделать текст заголовка светящимся. Начнём с добавления темного на background-color . Установим значение смещения для text-shadow на 0 и радиус размытия — от этого свечение будет распространяться равномерно вокруг каждой буквы. Наконец, выбираем яркий цвет для text-shadow и добавляем несколько слоёв.
body < background-color: #301934; >header h1
Тест заголовка 3D
Лучше выбирать жирный или полужирный шрифт, как Roboto Из Google Fonts. Вот что можно сделать:
Для создания этого эффекта нужно две группы многослойных теней.
Во-первых, группа однотонных слоёв text-shadow с небольшим размытием и непрозрачностью — они создадут края текста.
Во-вторых, тени с более широкими смещениями и радиусами размытия в цветах rgba() :
text-shadow: 1px 1px 1px #957dad, 1px 2px 1px #957dad, 1px 3px 1px #957dad, 1px 4px 1px #957dad, 1px 5px 1px #957dad, 1px 6px 1px #957dad, 1px 10px 5px rgba(16, 16, 16, 0.5), 1px 15px 10px rgba(16, 16, 16, 0.4), 1px 20px 30px rgba(16, 16, 16, 0.3), 1px 25px 50px rgba(16, 16, 16, 0.2);Текст прописными буквами будет выделяться сильнее. Полный синтаксис:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); header h1
Добавляем многоцветный слой text-shadow
Для забавных эффектов подходят забавные шрифты, поэтому в примере Niconne.
Берём предыдущий пример и удаляем вторую групп теней, сохранив однотонные, а потом смешиваем цвета.
@import url('https://fonts.googleapis.com/css2?family=Niconne&display=swap'); header h1
Проверяем, что смещения text-shadow расположены равномерно, а текст не перекосило. Можно «поиграть со шрифтами»: настроить font-size и font-weight и поменять цвета.
Эффект пишущей машинки в HTML и CSS
Анимация, при которой каждая буква появляется по очереди.
Для красоты нужен короткий заголовок в одну строчку и шрифт с фиксированным межбуквенным расстоянием: Courier, Inconsolata, Anonymous Pro, Source Code Pro.
Задаём заголовок в HTML:
This is a Header
Теперь стилизуем. Добавляем мигающий курсор в конце текста с помощью свойства border-right :
header h1 < font-size: 70px; font-weight: 500; color: #553c9a; border-right: 4px solid #000; /*This will be the blinking cursor*/ >
Определяем два свойства animation для текста заголовка и курсора. Называем мигающую анимацию cursor .
animation: cursor 1s infinite step-end;Для определения анимации используем @keyframes . Мигать — переходить из видимого в скрытое, так что используем свойство border-color и определяем пойнты, когда оно скрыто, прозрачно, видимо.
@keyframes cursor < 0%, 100%50% >Анимация будет длиться 1 секунду. В начале свойство border-color прозрачное, как определено @keyframes . В середине — на 50% от 1 секунды — оно чёрное, а затем снова прозрачное. Это анимация в бесконечном цикле.
По умолчанию курсор будет появляться и исчезать плавно — это не тот эффект, который нам нужен. Поэтому время animation устанавливаем на step-end. То есть animation будет резко переходить к каждому пойнту , установленному @keyframes.
Добавляем анимацию пишущей машинки CSS
Используйте свойство width с единицей измерения ch — количеством символов в заголовке.
Используем функцию step , устанавливаем количество пойнтов, равное количеству символов.
animation: cursor 1s infinite step-end, typing 15s infinite steps(16); white-space: nowrap; overflow: hidden;Свойство white-space предотвратит наложение слов и букв друг на друга, свойство overflow: hidden сохранит буквы невидимыми, пока они не будут «набраны» на странице.
Теперь определим каждый шаг в анимации.
@keyframes typing < 0%< width: 0ch>/*Text is hidden*/ 30% < width: 16ch;>/*The enitre header will be typed out 1 character at a time*/ 80% < width: 16ch;>/*Text stays visible*/ 90% < width: 0ch;>/*Text is deleted*/ 100% < width: 0ch;>/*Text stays hidden*/ >Множественная анимация набора текста
Другой вариант метода — заменить слова в заголовке с помощью неупорядоченного списка ul . Набранные слова попадут в список.
Создаём HTML и решаем, какая часть заголовка будет fixed , а какая — typed :
Задаём значение inline-flex для display , чтобы выровнять фиксированный текст и список. Стилизуем.
.header < display: inline-flex; >.header .fixed < font-size: 70px; font-weight: 500; color: #b393d3; >.header .typed < margin-left: 20px; line-height: 90px; height: 90px; >.header .typed li
Теперь создаём псевдоэлемент ::before для слов, заключённых в тег span .
.header .typed li span < position: relative; >.header .typed li span::before < content: ''; position: absolute; height: 100%; width: 100%; left: 0; border-left: 2px solid #553c9a;/*Blinking cursor*/ >
Теперь animation . Курсор, как в прошлом примере, свяжем со span . Спрячем слова, которые будем «печатать», добавив background того же цвета, что и фон страницы.
.header .typed li span::before
Переходим к @keyframes :
@keyframes cursor < 0%, 100%50% > @keyframes typing < 100%< left: 8ch;>/*Use the number of characters in the longest word*/ >Буквы в заголовке будут открываться по одной по мере перемещения курсора по горизонтали.
Добавляем ещё одну анимацию для списка typed :
animation: slide 4.5s steps(3) infinite;Опять @keyframes . Используем slide , чтобы открывать слова пошагово:
@keyframes slide < 100%< top: -270px;/*Height of the words times 3*/ >> >Обратите внимание на продолжительность анимации, чтобы эффекты не вступали в противоречие друг с другом.
Градиентная текстовая анимация в CSS
Градиенты можно поднять на новый уровень, просто добавим анимацию. Создадим бесконечную анимацию для linear-gradient() . Создаём заголовок с как минимум тремя значениями цвета в градиенте. В примере — пять:
background-image: linear-gradient(to right ,#553c9a, #ee4b2b, #00c2cb, #ff7f50, #553c9a);
По крайней мере два цвета должны быть видны в тексте заголовка в начале анимации. Настраиваем background-size и background-position , ищем подходящие значения:
background-size: 200%; background-position: -200%;Добавляем свойство animation и @keyframes , ориентируемся на background-position .
animation: animated-gradient 2s infinite alternate-reverse; @keyframes animated-gradient < to< background-position: 200%; >>По сути, перемещаем фон с изначальной позиции на противоположную и обратно. Вот что выходит:
Устанавливаем анимацию градиента на :hover . Заменяем animation свойством transition .
transition: all ease-in-out 2s;Потом добавляем псевдоэлемент :hover:
header h1:hover
Наводим курсор на текст, проверяем.
И идём делать яркие заголовки, которые привлекают внимание.
Фон под текстом
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами:
Вариант №1 – разметка тегами
Первый вариант так себе, но работает – обвернуть каждую строку в и добавить переносы строк
.
dummy text of the printing
and typesetting industry
.title < font-size: 50px; line-height: 56px; color: #000; >.title span
Как сделать видео фоном сайта
Наверняка многие из вас задумывались о том, как добавить динамичности своему сайту, но не могли внести какие-либо глобальные изменения из-за того, что это сложно. В этой статье мы расскажем вам как сделать видео фоном сайта за 10 минут.
Несколько живых примеров:
popvideo.com/our-work
nyccorporatevideoproduction.com
Вставка видео в фон сайта может придать динамичности вашему сайту и тем самым заинтересовать пользователя. Однако у этой затеи есть и негативные стороны. Во-первых, видео фон увеличивает вес сайта, что влияет на время загрузки сайта. Поэтому лучше заменить видео на простую картинку для тех, кто заходит с телефона или планшета. Во-вторых, видео должно быть качественное, что тоже может стать проблемой. Однако эти проблемы решаемы, пусть и частично.
Как сделать видео фоном сайта
Сделать фоном видео очень просто. Для этого необходимо:
-
Вставить код в html:
div class="fullwidth-bg"> div class="video-layer"> h1>Заголовокbr>для фонового видео на сайтеh1> div> video loop muted autoplay poster="/uploads/video-bg-alt.jpg" class="fullscreen-bg__video"> source src="/uploads/video.mp4" type="video/mp4"> source src="/uploads/video.webm" type="video/webm"> video> div>.fullwidth-bg position: relative; height: 100%; width: 100%; padding-top:45%; overflow: hidden; z-index: -100; > .fullwidth-bg__video position: absolute; top: 0; left: 0; width: 100%; > .video-layer background: rgba(0,0,0,0.6); position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5; > .video-layer h1 text-align:center; color:#fff; font-size: 70px; margin-top:17%; > @media (max-width: 767px) .fullwidth-bg background: url('/uploads/video-bg-alt.jpg') center center / cover no-repeat; > .fullwidth-bg__video display: none; > >Как выбрать и подготовить видео для фона сайта
Одна из проблем с подбором видео для фона сайта связана не только с самим подбором, но и с авторскими правами. Поэтому к поиску видео следует отнестись серьёзно. Ниже представлен список ресурсов, где вы можете найти и скачать подходящее бесплатное или платное видео:
Также необходимо учитывать, что для кроссбраузерности следует добавлять видео в нескольких форматах, а именно .mp4 и .webm
Вот русскоязычный ресурс (softcatalog.info/ru/obzor/konvertery-video), на котором можно скачать программы для конвертирования видео в нужный формат.
Как добавить видео фоном в шаблон Moguta CMS
Куда вставлять файл видео, HTML-код и CSS-стили в шаблоне Moguta:
- Сам файл видео через хостинг загружаем в папку uploads;
- Через административную панель проходим путь — Настройки — Шаблон — template.php;
- Допустим, мы решили вставить видео сразу после шапки сайта. Ищем начало следующего блока и туда вставляем код:
div class="fullwidth-bg"> div class="video-layer"> h1>Заголовокbr>для фонового видео на сайтеh1> div> video loop muted autoplay poster="/uploads/video-bg-alt.jpg" class="fullscreen-bg__video"> source src="/uploads/video.mp4" type="video/mp4"> source src="/uploads/video.webm" type="video/webm"> video> div>
.fullwidth-bg position: relative; height: 100%; width: 100%; padding-top:45%; overflow: hidden; z-index: -100; > .fullwidth-bg__video position: absolute; top: 0; left: 0; width: 100%; > .video-layer background: rgba(0,0,0,0.6); position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5; > .video-layer h1 text-align:center; color:#fff; font-size: 70px; margin-top:17%; > @media (max-width: 767px) .fullwidth-bg background: url('/uploads/video-bg-alt.jpg') center center / cover no-repeat; > .fullwidth-bg__video display: none; > >
Теперь у вас есть вся необходимая информация, чтобы узнать как вставить видео фоном сайта. Если у вас будут какие-либо вопросы — пишите нам в группу или в комментарии ниже, до новых встреч!
- Плавное подчеркивание ссылок для сайта
- Как установить reCAPTCHA на сайт
- Как подключить новый шрифт на сайт