html — Задний фон обрезается в мобильной версии
Вопрос задан
Изменён 1 год 1 месяц назад
Просмотрен 156 раз
При просмотре адаптивной версии сайта в браузере, проблем не возникает, но как только открываешь с мобильного устройства или планшета, задний фон обрезается. Что я делаю не так?
Html CSS код прилагаю по ссылке ТЫК
<body>
<header>
<div>
<div>
<nav>
<a href="#"><img src="img/new_logo.svg" alt="logo" /></a>
<ul>
<li>
<a href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#aboutMe">O mně</a>
</li>
<li>
<a href="#price">Ceník</a>
</li>
<li>
<a href="#kontakty">Kontakty</a>
</li>
</ul>
<a href="tel:+420770114540">+0000</a>
</nav>
<div>
<h2>Dsdfkjsdfjsgdjgf</h2>
<h3>Váš stylista a kadeřník v Brně</h3>
<img src="img/scissors.
svg" alt="" />
<button>
<a href="https://n688921.yclients.com/">Online rezervace</a>
</button>
</div>
</div>
</div>
</header>
</body>
.main-bgFix background-image: url(../img/bg_main3.png) background-position: center center height: 100vh max-width: 100%
Так же прикладываю скины как должно быть и как оно выглядить на самом деле
- html
- css
2
Как сказал @Simon Вам надо использовать background-size, предположу что Вы хотите чтобы картинка не обрезалась, тогда Вам надо задать: backround-size:100%. Но это будет ужасным решением, ведь картинка будет растягиваться и сжиматься, лучше всего использовать background-size: cover тогда background будет выглядеть наиболее адекватно и типично для большинства проектов)
Документация на свойство background-size
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Задний фон закрывает заголовок
- Главная
- Вопросы
При стилизации одной из секции в Sass возникла проблема: задний фон закрывает заголовок и подзаголовок сайта.
(Так как не было в вариантах выбора для прикрепления кода Sass, проставил CSS.)
.choise
position: relative
min-height: 895px
padding: 57px 0 138px 0
background: url('../img/bg/mobile_app.png') center (center / cover) no-repeat
&_img
position: relative
display: block
margin: 56px auto 0 auto
z-index: 2
&_descr
text-align: center
color: #222222
font-size: 17px
font-weight: 300
line-height: 24px
.black
position: absolute
top: 0
left: 0
height: 499px
width: 100%
background-color: #070716
z-index: 1
<section>
<div>
<div></div>
<div>возможности</div>
<h3>Выбор - отличная штука!</h3>
<div>Закажите автомобиль, который подходит вам
по стилю и бюджету</div>
<img src="img/choise/car.
png" alt="uber car">
<div>
Машины на каждый день.<br>
Лучше, быстрее и дешевле, чем такси
</div>
</div>
</section>
Тимофей Павлов
1 year ago
- Активные
- Старые
- Голоса
блоки для которых определено позиционирование position: absolute/relative/fixed
идут поверх блоков без позиционирования, поэтому блок .black перекрывает заголовки
для него нужно проставить index: -1 — отрицательное значение ставит блок позади контента родительского блока, т.е. весь контент внутри блока <div> будет поверх черного фона, что нам и нужно
Valera TT
1 year ago
При отрицательном z-index пропадает задний фон (черный цвет). И цвет заголовков должен быть белый. Этот код скопирован из депазитория, поэтому ошибка не моя.
Тимофей Павлов
1 year ago
вижу что название класса choise вместо choice, значит этот код не является кодом из депозитория, возможно где-то в других фрагментах кода такие же расхождения, если не показываются заголовки — надо смотреть стили для label, title, subtitle — там цвет задается для заголовков и z-index для них должен быть 2, чтобы они были поверх фона black
Valera TT
1 year ago
так в депозитории нет стилей для label, title, subtitle, я знаю что там задаётся цвет для заголовков, мне поэтому и не понятно как они станут белыми если это не прописано
Тимофей Павлов
1 year ago
а нет, нашел, там были прописаны а у меня нет, всё заработало, спасибо
Тимофей Павлов
1 year ago
Использование фонового видео на веб-сайте: примеры и советы
Узнайте, как сжимать видео в GIF-файлы, оптимизировать кросс-девайсную оптимизацию и использовать высококачественное фоновое видео для своего веб-сайта.
Джон Мур Уильямс
Ничего не найдено.
При эффективном использовании фоновые видеоролики могут привлечь внимание посетителей сайта и вовлечь их в процесс погружения.
Фоновые видеоролики могут стать привлекательным дополнением к дизайну веб-сайта. Но при плохом исполнении они могут расстроить посетителей и заставить их покинуть сайт.
Будь то личное портфолио, магазин электронной коммерции или блог, фоновые видео могут побудить посетителей взаимодействовать с контентом веб-сайта. Однако видео также может отвлекать или даже причинять вред. Встраивая движение в свой дизайн, важно помнить о проблемах доступности.
В этом руководстве мы изучаем веб-сайты с лучшими примерами фонового видео и делимся советами и рекомендациями по использованию фонового видео в ваших проектах.
4 примера веб-сайтов с фоновым видео
Лучшие веб-сайты с видеофоном привлекают внимание зрителей, не отвлекая от основного содержания сайта. Их основная функция заключается в том, чтобы заинтересовать посетителей и представить их, дополняя другие элементы сайта.
Отличный способ научиться использовать фоновое видео в своих интересах — увидеть этот элемент дизайна в действии. Вот пять примеров веб-сайтов, которые очень эффектно используют фоновое видео веб-сайта.
Предупреждение о светочувствительности: Следующие веб-сайты используют движение при загрузке.
1. OSCO Studios
OSCO Studio — креативное агентство, специализирующееся на контенте и стратегии. Лендинг бренда представляет собой полноэкранное фоновое видео с минимальным текстом и прозрачной панелью навигации в верхней части страницы.
Бесшовный цикл видео показывает кадры из визуальной рекламы агентства — широкий спектр кадров от пляжей и голубого неба до гор и спортивных автомобилей — за логотипами предыдущих клиентов и призывами к действию (CTA), такими как «свяжитесь с нами». Использование OSCO Studio фонового видео демонстрирует их универсальность и способность создавать ведущий в мире видео- и фотоконтент, чтобы потенциальные клиенты знали, что они могут ожидать потрясающих результатов.
2. The Royal от Seed Mobile
The Royal — это телефон, выпущенный Seed Mobile, и на этом веб-сайте демонстрируется продукт с фоновыми видеороликами об устройстве.
Посетителей сайта приветствует замедленное высококачественное видео с изображением телефона и его функций за текстом «THE SEED ROYAL UNVEILED». Видео использует черный фон с зелеными акцентами, чтобы соответствовать брендингу Seed, и воспроизводится в непрерывном цикле.
Графика фонового видео вызывает любопытство у Royal, не отвлекая внимания от других элементов сайта, включая уникальную трехмерную интерактивную модель продукта.
3. Фильмы Milk Truck
Фильмы Milk Truck — это финская видеооператорская компания, созданная Джейкобом Нордбладом и Алекси Пушка. На главной странице посетителей встречает статический экран с названием компании и стрелкой, указывающей вниз, что побуждает вас прокручивать страницу. По мере того, как вы перемещаетесь вниз по странице, видеоклипы из различных проектов воспроизводятся в цикле.
Milk Truck использует фоновое видео, чтобы продемонстрировать свои навыки видеосъемки, но также предлагает множество статического контента, чтобы не перегружать сайт посетителями.
4. Остин Гомес
Как только вы попадаете на сайт Остина Гомеса, становится ясно, что этот сайт посвящен музыке. Остин работает с художниками над созданием музыкальных клипов и использует несколько фоновых видео, чтобы продемонстрировать свое портфолио.
Непосредственная целевая страница использует зацикленное видео, но прокрутка вниз показывает сетку музыкальных клипов с анимированным фоном и яркими цветами. В некоторых видеороликах используется движущийся фон для создания эффекта боке (размытости), в то время как другие получаются четкими и детализированными. Каждое видео в сетке использует черное наложение, чтобы выделить белый текст, чтобы отключить моушн-дизайн и обеспечить видимость текста.
Веб-сайт Остина — отличный пример личного портфолио с фоновыми видеороликами, демонстрирующими его фирменный стиль.
Посетители могут прокручивать цифровое резюме, пока клипы из его работ показывают его портфолио на заднем плане.
Дайте волю своему творчеству в Интернете
Создавайте полностью настраиваемые, готовые к производству веб-сайты или высокоточные прототипы без написания ни строчки кода. Только с вебфлоу.
Начните бесплатно
Подпишитесь на участие в программе предварительной оценки Webflow
Спасибо! Теперь вы подписаны!
Ой! Что-то пошло не так при подписке.
Начните бесплатно
3 места, где можно найти бесплатные фоновые видеоролики
Учитывая, что фоновые видеоролики должны дополнять повествование и индивидуальность бренда, видео, созданное специально для вашего сайта, расскажет наиболее убедительную историю. Однако пользовательские видео не всегда доступны.
Сроки и стоимость производства могут сделать производство оригинального видео невозможным. Хорошей новостью является то, что стоковые видеоролики по-прежнему могут передавать правильное сообщение — и многие из них доступны бесплатно.
Вот несколько мест, где можно найти бесплатное фоновое видео для вашего сайта:
- Coverr: Coverr предлагает ряд бесплатных стоковых видео. Они добавляют новые видео каждую неделю, поэтому коллекция остается свежей. Категории включают еду, технику, животных и природу.
- Vimeo: Хотя Vimeo не является поставщиком фонового видео, многие члены сообщества бесплатно распространяют видеоматериалы через платформу. Потребуются некоторые поиски, чтобы найти именно то, что вы ищете, но вы никогда не знаете, когда вы можете найти золото.
- Видео Pexels: Pexels — отличная платформа для бесплатных стоковых фотографий, поэтому неудивительно, что они предлагают коллекцию видео. Наиболее полезным аспектом этого ресурса является детализация категорий на выбор: например, вместо того, чтобы пробираться через все, что может предложить «Природа», вы можете сразу перейти к «Деревьям».
Рекомендации для фонового видео
Добавление фонового видео может поднять ваш сайт на новый уровень, но важно сделать осознанный выбор дизайна. Вот несколько советов, которые помогут вам.
Предоставьте опции для приостановки видео. Чрезмерное движение может нанести вред посетителям сайта с вестибулярными расстройствами, эпилепсией, светочувствительностью, СДВГ и морской болезнью. Включите кнопку воспроизведения/паузы на видео, чтобы посетители, которые не хотят чрезмерного движения, могли по-прежнему наслаждаться вашим сайтом.
Уменьшить размер файла. Видео с качеством Full HD или 4K создают большие файлы, которые влияют на скорость загрузки. Чем больше размер, тем медленнее будет загружаться ваша веб-страница, что может вернуть посетителей к результатам поиска, чтобы найти страницу с более быстрой загрузкой. Чтобы решить эту проблему, используйте такие веб-сайты, как Clipchamp и HandBrake, для сжатия видео.
Используйте гифки для мобильных устройств. Gif означает формат обмена графикой. Это короткие зацикленные файлы изображений, которые в основном существуют в социальных сетях, но вы можете использовать их для своего веб-сайта вместо видео, чтобы сэкономить место в файле.
GIF также лучше оптимизированы для мобильных устройств, чем видео. Некоторые GIF-файлы довольно большие, поэтому лучше использовать специальный компрессор, такой как Imgur, GIPHY или Ezgif, чтобы уменьшить размер файла перед загрузкой.
Выберите подходящие видео. Не используйте первое найденное эстетически привлекательное видео, не принимая во внимание его релевантность.
Фоновые видеоролики должны подходить для вашего веб-сайта и соответствовать продуктам и услугам. Если вы продаете определенный продукт, лучше всего получить специальные кадры от видеооператора, который выделяет конкретный фирменный товар. Однако, если у вас нет ресурсов, вы можете выбрать тангенциальные стоковые кадры, которые дополнят ваш продукт.
Например, компания, продающая снаряжение для кемпинга, может использовать видеозапись леса, чтобы создать ощущение природы на участке. Та же стратегия может быть применена к предприятиям, которые продают услуги — кадры леса можно так же легко применить к сайту для экскурсий по местным тропам.
Помните: видеороликов о продукте не всегда достаточно — они должны продаваться таким образом, чтобы донести до посетителя сообщение и побудить его совершить покупку.
На сайте дизайнера интерьеров нет видео процесса ремонта дома со сломанными стенами и разбросанным мусором. Вместо этого фоновые видеоролики могут охватывать дом после ремонта с кадрами семьи, улыбающейся и наслаждающейся своим новым домом, сообщая зрителям, что они тоже могут найти радость в услугах дизайнера.
Используйте более короткие видео. Короткие видео уменьшают размер файлов и повышают скорость загрузки. Зацикливание короткого клипа для создания впечатления более длинного видео сохраняет привлекательность графики, не приводя к буферизации.
Не используйте отвлекающие видео. Фоновые видео не должны быть в центре внимания — они находятся на заднем плане не просто так. Они должны дополнять изображения переднего плана, не отвлекая от основного контента.
Не используйте видео со звуком. Избегайте фоновых видеороликов, которые воспроизводят звук через динамик ноутбука или телефона в тот момент, когда посетитель открывает сайт. Потенциальный клиент может сразу же закрыть вкладку и перейти на сайт конкурента с менее раздражающим веб-дизайном.
Пропустите звук и рассказывайте истории с помощью визуальных эффектов. Если звук или музыка являются неотъемлемой частью взаимодействия с пользователем, убедитесь, что звук отключен по умолчанию, и включите кнопку в углу, чтобы посетители могли включать и выключать фоновую музыку.
Найдите больше вдохновения с Webflow
Использование правильных тем, цветов и циклических эффектов в фоновых изображениях может оживить дизайн.
Но имейте в виду, что автовоспроизведение видео без легкодоступной опции приостановки является одной из 10 основных причин, по которым люди покидают веб-сайт. С помощью Webflow вы можете включить кнопку воспроизведения/паузы для всех видео по умолчанию.
Для получения дополнительных рекомендаций по использованию фоновых видео в своих проектах ознакомьтесь с уроком стилей фона Университета Webflow.
28 ноября 2022 г.
Ресурсы
Поделитесь этим
Рекомендуемые чтения
Ресурсы
Ресурсы
Ресурсы
Подпишитесь на Webflow Inspo
Каждую неделю получайте самые лучшие, самые крутые и новейшие входящие сообщения в дизайне и без кода.
Электронная почта
Вы можете отказаться от подписки в любое время, никаких обид. Политика конфиденциальности
Все готово, следите за нашей следующей рассылкой!
К сожалению, адрес электронной почты недействителен.
Попробуйте еще раз!
Подробнее о Designer
Designer
Сила CSS, HTML и JavaScript в визуальном холсте.
Взаимодействия
Визуально создавайте взаимодействия и анимацию веб-сайта.
Подробнее о взаимодействиях
CMS
Определите собственную структуру контента и создавайте дизайн с использованием реальных данных.
Подробнее о CMS
Электронная торговля
Прощайте, шаблоны и код — визуально оформляйте свой магазин.
Подробнее об электронной торговле
Редактор
Редактируйте и обновляйте содержимое сайта прямо на странице.
Подробнее о Редакторе
Хостинг
Настройте молниеносный управляемый хостинг всего за несколько кликов.
Подробнее о хостинге
Бесплатно, пока вы не будете готовы к запуску
Создайте свой сайт бесплатно и занимайте столько времени, сколько вам нужно. Просто добавьте план сайта для большего количества страниц и собственный домен, когда будете готовы к миру.
