Редактор Wix: Добавление изображения на фон страницы | Центр Поддержки
Выберите фоновое изображение для страницы, чтобы придать ей глубину. Загрузите свое фото, добавьте бесплатное изображение Wix / Unsplash или купите изображение Shutterstock. Вы можете настроить такие параметры, как прозрачность, масштаб или расположение изображения, и даже добавить эффекты прокрутки (например, параллакс).
Содержание
Загрузка фонового изображения
Загрузите собственное изображение и сделайте уникальный фон страницы. Вы можете использовать изображения со своего компьютера, из социальных платформ, других сайтов Wix и даже с URL-адреса.
Чтобы загрузить фоновое изображение:
- Перейдите на нужную страницу в редакторе.
- Нажмите Дизайн сайта в левой части редактора.
- Наведите курсор на фон страницы и нажмите Настроить.
- Выберите Фото.
- (В медиаменеджере) Нажмите + Загрузить файлы в левом верхнем углу.
- Добавьте изображение со своего компьютера, других сайтов Wix, из соцсетей или по URL.
- Нажмите Изменить фон.
- (Необязательно) Нажмите Добавить на другие страницы, чтобы применить фон к другим страницам сайта.
Добавление фонового изображения из файлов сайта
Изображение уже сохранено в файлах сайта? Вы можете установить его в качестве фона страницы прямо из медиаменеджера.
Чтобы добавить фоновое изображение на страницу:
- Перейдите на соответствующую страницу в редакторе.
- Нажмите Дизайн сайта в левой части редактора.
- Наведите курсор на фон страницы и нажмите Настроить.
- Выберите Фото.
- (В медиаменеджере) Нажмите Файлы сайта слева.
- Выберите изображение для фона страницы.
- Нажмите Изменить фон в правом нижнем углу.
- (Необязательно) Нажмите Добавить на другие страницы, чтобы применить фон к другим страницам сайта.
Использование фонового изображения от Wix, Shutterstock или Unsplash
Улучшите фон страниц с помощью изображений профессионального качества. Вы можете использовать фоновые изображения, предлагаемые Wix или Unsplash, или купить изображение у Shutterstock.
Чтобы добавить изображение от Wix, Unsplash или Shutterstock:
- Перейдите на соответствующую страницу в редакторе.
- Нажмите Дизайн сайта в левой части редактора.
- Наведите курсор на фон страницы и нажмите Настроить.
- Выберите Фото.
- (В медиаменеджере) Выберите один из следующих вариантов в разделе Коллекции:
- Медиа от Wix: бесплатные изображения, иллюстрации и шаблоны, предлагаемые Wix.
- Unsplash: бесплатные изображения, иллюстрации и шаблоны от Unsplash.
- Shutterstock: лицензионные изображения Shutterstock (стоимость варьируется).
- Найдите понравившееся изображение одним из следующих способов:
- Прокрутите доступную подборку изображений.
- Используйте раскрывающиеся меню фильтров, чтобы найти подходящие изображения.
- Выберите изображение и нажмите Изменить фон в правом нижнем углу.
- (Необязательно) Нажмите Добавить на другие страницы, чтобы применить фон к другим страницам сайта.
Несколько фоновых картинок | WebReference
К одному элементу можно добавить сразу несколько фоновых изображений через единственное свойство background. Это позволяет обойтись одним элементом для создания сложного фона или одной картинкой, выводя её несколько раз с различными настройками. Все изображения со своими параметрами перечисляются через запятую, при этом вначале указывается картинка которая выводится поверх остальных изображений, а последней, соответственно, самая нижняя картинка.
Пример 1. Три фона
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Фон</title> <style> body { background: url(/example/image/animate-bg3.png) 90% 90% no-repeat fixed, url(/example/image/animate-bg2.png) 40% 40% no-repeat fixed, url(/example/image/animate-bg1.jpg) no-repeat fixed; background-size: auto, auto, cover; /* Меняем масштаб */ } </style> </head> <body></body> </html>Рис. 1. Фон с тремя изображениями
Отдельные изображения для фона позволяют менять их положение, а также анимировать, как показано в примере 2.
Пример 2. Анимированный фон
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Фон</title> <style> body { background: url(/example/image/animate-bg3.
Подробнее про анимацию рассказывается далее.
Рассмотрим теперь как применять одну картинку для создания блока с рамкой (рис. 2). Ширина блока фиксированная, а высота тянется в зависимости от объёма содержимого блока.
Рис. 2. Рисованная рамка
На рисунке хорошо заметна верхняя и нижняя часть, которую требуется вырезать в графическом редакторе и расположить по горизонтали. Средняя часть выбирается таким образом, чтобы она повторялась без швов по вертикали. Картинка имеет выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно.
В итоге получится такое подготовленное изображение (рис. 3). Клетчатое поле обозначает прозрачность, оно позволяет задавать наряду с изображениями цветной фон и легко менять его через стили.
Рис. 3. Подготовленное для фона изображение
Сам фон выводится свойством background, оно же задаёт и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую и в данном случае имеет значение их порядок. Нам требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставим их первыми (пример 3). Цвет фона указывается последним.
Пример 3. Несколько фоновых картинок
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Фон</title> <style> .aztec { width: 212px; /* Ширина блока с учётом padding */ min-height: 240px; /* Минимальная высота */ background: url(/example/image/aztec-bg.png) 0 0 no-repeat, url(/example/image/aztec-bg.png) -576px 100% no-repeat, url(/example/image/aztec-bg.
Первый фон выводит верхнюю границу блока, второй фон — нижнюю, а третий вертикальные границы. Последним идёт цвет, который виден в прозрачной центральной части блока (рис. 4).
Рис. 4. Вид рамки
- background
- background-size
- Линейный градиент
- Масштабирование фона
- Спрайты
- Установка фона и градиента
- Фоновая картинка
Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Лучшие фоны для ваших проектов
Лучшие фоны для ваших проектов | Фрипикпо цвету
по событию
по теме
по текстуре/материалу
по стилю
Загрузите крутые обои и фоны для рабочего стола для своего компьютера
Поскольку мы часто их используем, как насчет того, чтобы придать им индивидуальность? Фоны просты в использовании, и они могут передать то, что вы чувствуете, или просто представлять ваши любимые темы. Вы можете использовать замечательные фоны для своего мобильного телефона, планшета или компьютера.Добавляйте красивые фоны в слайд-шоу и презентации
Всякий раз, когда вам нужно представить свои идеи или продемонстрировать сложные данные перед людьми, презентация PowerPoint является полезным ресурсом. Фоны позволят вам придать каждому слайду лучший дизайн, что значительно упростит общение с вашей аудиторией и вызовет их интерес. Добавьте контекст, добавьте индивидуальности или сделайте слайды визуально более привлекательными.
Настройте свои собственные листовки и баннеры с помощью фона
При разработке баннеров, листовок или других видов рекламных элементов в дополнение к информации, которую вам нужно показать людям, красочный фон может помочь вам привлечь внимание получателя.
Часто задаваемые вопросы
Как удалить фон с изображения в Photoshop?
Есть много способов сделать это. Некоторые люди предпочитают дублировать слой, использовать инструмент «Перо», инструмент «Быстрое выделение» или инструмент «Магнитное лассо», чтобы выбрать части, которые они хотят сохранить, инвертировать выделение и удалить фон. Если вы используете более новые версии Photoshop (2020 или более поздние версии), также есть параметр «Удалить фон», расположенный в разделе «Быстрые действия» на панели «Свойства».
Как создать собственный фон?
Прежде всего, вы можете посетить Freepik и найти тысячи популярных фоновых шаблонов, или вы можете начать свой проект с чистого листа.
Так как лучше всего, если у вас есть привлекающие внимание изображения, попробуйте использовать свои собственные фотографии или получить несколько стоковых изображений и дизайнов из наших библиотек и добавить их на монтажную область в вашей любимой программе дизайна. Кроме того, у нас есть мощный инструмент Wepik, онлайн-редактор изображений, который позволит вам легко создавать фоны. Предварительный опыт не требуется, и это очень удобно для пользователя, поэтому начните загружать наши ресурсы и свободно редактировать или использовать их.
Что такое фон в графическом дизайне?
Хорошо сделанные композиции содержат множество элементов, и одним из них является фон. Фон можно определить как изображение или декорации, которые находятся за главными героями композиции, то есть другими элементами, расположенными ближе к зрителю.
Фон также может быть однотонным, градиентным или текстурным. Они, по сути, создают глубину и контраст и позволяют другим элементам выделяться больше, включая наложенный текст.
12 веб-сайтов с потрясающими фоновыми изображениями [+ Лучшие практики дизайна]
Фоновые изображения могут помочь привлечь, вовлечь и информировать посетителей вашего веб-сайта. В зависимости от дизайна и расположения фоновые изображения могут создавать настроение, обеспечивать контекст о бренде и привлекать внимание посетителей к важным элементам веб-страницы.
В этом посте мы рассмотрим два разных типа фоновых изображений веб-сайтов, которые вы можете использовать, а затем рассмотрим реальные примеры веб-сайтов с этими типами фона. Затем мы рассмотрим некоторые рекомендации по использованию фоновых изображений в дизайне вашего собственного веб-сайта. Давайте начнем.
Фоновые изображения для веб-страниц
Прежде чем приступить к поиску идеального фонового изображения, вы должны знать некоторые общие сведения о фонах веб-сайтов.
Существует два типа фона веб-сайта: фон тела или фон содержимого. Фон тела покрывает большую часть или весь экран. Это может быть изображение, графическая иллюстрация, один цвет, цветовой градиент или текстура. Фон содержимого окружает текст, изображения или другой контент и может быть наложен поверх основного фона.
Возьмем, к примеру, домашнюю страницу нашего блога. Фон тела белый, а фон содержимого светло-голубой. Фон контента помогает сгруппировать избранное изображение, заголовок, категорию и время чтения отдельных сообщений в блоге. Это может помочь посетителям легче просматривать блог и делать более осознанный выбор того, на что нажимать.
При использовании фоновых изображений для веб-страниц вы можете использовать изображения в качестве основного фона и размещать текст непосредственно поверх них. Это распространенный подход к созданию яркой домашней страницы. Вы также можете использовать изображение (или несколько) в качестве фона контента, наложенного на основной фон одного цвета.
Это обычный подход для портфолио сайтов.
Давайте взглянем на несколько примеров дизайна фона веб-сайта ниже.
Дизайн фона веб-сайта
- Warszawski UL
- Корвет Уход
- Дизайн зависимостей
- Сквозь тьму
- Колоссальный
- ИНСПИИР
- Архитекторы Моррис Аджми
- hipcool Студия
- Напитки Goldling
- К+
- СВН
- Парки Синтры
1. Warszawski UL
Warszawski UL — это интерактивный веб-сайт, использующий анимацию прокрутки и большие фоновые изображения для привлечения и поддержания внимания посетителей. Каждое изображение предлагает поближе познакомиться с интерьером обслуживаемого офиса.
Что нам нравится: Каждое фоновое изображение, включенное в слайдер главной страницы, содержит оттенки синего, которые соответствуют цвету, используемому в логотипе и других элементах дизайна, что делает общий дизайн более целостным.
2. Corvette Care
Corvette Care — это веб-сайт, богатый изображениями. Его домашняя страница включает слайдер главного изображения, который срабатывает, когда пользователь наводит курсор на одно из слов, представляющих услуги компании. Это наглядный способ показать, что компания не только предлагает базовое техническое обслуживание и ремонт, но также является одним из ведущих в стране предприятий по восстановлению и обслуживанию Corvette.
Что нам нравится: Вместо того, чтобы показывать три изображения рядом, этот сайт использует слайдер различных фоновых изображений для представления набора услуг, который активируется при наведении курсора на текст.
3. Addictions Design
Addictions Design предлагает множество типов фоновых изображений: некоторые из них полноразмерные, многослойные и представлены в уникальных слайдерах. Эти фоновые изображения помогают выполнить миссию компании, которая заключается в демонстрации коллекций ремесленников и мебельных фирм.
Что нам нравится : Фоновые изображения, особенно фоновое изображение всего тела веб-сайта в главном разделе главной страницы, заставляют вас почувствовать, что вы входите в один из выставочных залов Addictions Design.
4. ThruDark
ThruDark сочетает фоновые изображения и видео с темной цветовой схемой, чтобы передать различные климатические условия и виды деятельности, для которых предназначены его продукты, будь то экспедиция в экстремально холодную тундру или влажные джунгли.
Что нам нравится: Изображения продуктов накладываются на изображения и видео пейзажей, подчеркивая, что одежда и оборудование ThruDark разработаны для помощи клиентам в самых тяжелых условиях.
5. Колоссальный
Колоссальный использует смелые цвета, изображения и анимацию, чтобы рассказать историю о том, как он создаст путь к исчезновению. На странице, посвященной его знаменательному проекту по борьбе с вымиранием — воскрешению шерстистого мамонта, — используются фоновые изображения и анимация, чтобы эффективно объяснить, что представляет собой этот вид и каковы цели его возрождения.
Что нам нравится: Фоновые изображения в сочетании с анимацией и другими эффектами делают этот сайт не только информативным, но и привлекательным.
6. INSPiiR
INSPiiR демонстрирует район INSPiiR Сен-Совер с большими фоновыми изображениями на своем сайте. На сайте используется непрозрачность, чтобы сделать эти фоновые изображения несколько прозрачными и темными, чтобы текст сверху было легко читать.
Что нам нравится: Полупрозрачные накладки гарантируют, что текст по-прежнему легко читается, не закрывая фоновые изображения.
7. Morris Adjmi Architects
Веб-сайт MA предназначен для выполнения миссии студии по созданию выдающихся зданий. С этой целью на главной странице есть слайдер главного изображения с почти строгой панелью навигации, на которой есть только логотип и кнопка с надписью «меню». Это гарантирует, что проекты MA находятся в центре внимания.
Что нам нравится: Минималистичная панель навигации удерживает внимание на фоновых изображениях, на которых представлены проекты из портфолио студии.
8. hipcool Studio
hipcool Studio – это минималистичный веб-сайт, на котором мастерски используются пробелы, чистая типографика и белый цвет фона, чтобы выделить изображения из своего портфолио. Поскольку изображения являются единственным источником цвета (помимо логотипа), они привлекают внимание посетителя и удерживают его.
Что нам нравится: На сайте большие красочные фоновые изображения сочетаются с абсолютно белым фоном контента, чтобы изображения действительно выделялись.
9. Goldling Drinks
Как и продукты, веб-сайт Goldling Drinks предназначен для того, чтобы переносить посетителей в мир вкуса своих напитков. Для этого у него есть мечтательный и игривый графический фон, который отражает «золотой час».
Что нам нравится: Фон веб-сайта состоит из графических иллюстраций, которые вызывают игривость и сложность его продуктов и бренда.
10. K+
K+ — один из лучших сайтов-портфолио фотографий.
На его домашней странице есть главный слайдер с фоновыми изображениями, которые выглядят как изображения в полный рост, пока пользователь не прокрутит страницу. Фотографии подобраны идеально: композиция привлекает внимание текстом по центру и стрелкой прокрутки, а также логотипом и кнопкой меню-гамбургер в углах.
Что нам нравится: Фоновые изображения красочные и детализированные, но они привлекают внимание, а не отвлекают внимание от логотипа, кнопки меню, текста и значка прокрутки.
11. JVN
Веб-сайт JVN посвящен ингредиентам, которые отличают эти продукты, что отражено в тексте, а также в видео и изображениях. Фоновые изображения демонстрируют продукты, их конкретные ингредиенты, такие как сахарный тростник, а также результаты на волосах реальных людей.
Что нам нравится: Фоновое изображение заголовка сочетает в себе текстуру, похожую на продукт, с изображением основателя, держащего продукт в бутылке, чтобы продемонстрировать его несколькими способами.
12. Парки Синтры
Парки Синтры предназначены для того, чтобы помочь посетителям открыть для себя множество различных способов исследовать Синтру. Для этого он использует несколько слайдеров изображений. Например, в разделе заголовка слайдер с анимированными изображениями показывает фрагменты изображений, на которых изображены многочисленные парки, памятники и места Синтры. Это отличный способ показать, что путешествие одного человека по городу может сильно отличаться от путешествия другого.
Что нам нравится: Слайдер главного изображения с панелями на этом веб-сайте — это умный способ использовать несколько фоновых изображений, не занимая много места.
Если вы хотите узнать больше о дизайне фона веб-сайта, вот видео от Flux , в котором рассказывается о пяти веб-сайтах с крутыми фоновыми изображениями и другими эффектами и о том, почему они работают: веб-страница должна не только хорошо выглядеть — она также должна каким-то образом улучшать взаимодействие с пользователем.
Давайте рассмотрим некоторые рекомендации, чтобы вы могли выбрать фоновое изображение, которое поможет представить ваш бренд и предоставить визуальные подсказки вашим посетителям.
1. Выберите изображения высокого качества.
Качество фоновых изображений определяется композицией, разрешением и размером. Во-первых, фоновые изображения должны иметь достаточно свободного пространства и цветового контраста, чтобы любой наложенный текст было легко читать. Вот пример:
Источник изображения
По данным NW Media Collective, фоновые изображения веб-сайта также должны иметь разрешение не менее 72 пикселей на дюйм (ppi) и 1920 пикселей в ширину и 1080 пикселей в высоту. Это соотношение 16:9считается идеальным, потому что он охватывает веб-страницу без ущерба для качества изображения.
2. Выделить текст.
При использовании фонового изображения необходимо выделить текст, чтобы посетители могли его прочитать. Вы можете сделать это несколькими способами: используя контрастные цвета, или сплошной цвет фона содержимого между текстом и фоновым изображением, или наложения на изображения.
Вы также можете расположить текст поверх темных или светлых частей фонового изображения.
Обратите внимание, что в приведенном ниже примере белый фон содержимого помогает выделить логотип и текст на фоне основного текста.
Источник изображения
3. Убедитесь, что изображения адаптируются.
Крайне важно, чтобы фоновое изображение было адаптивным, чтобы оно подстраивалось под все размеры экрана, не оказывая заметного влияния на производительность вашего веб-сайта. Чтобы изображения были адаптивными, вам необходимо:
- Установить для свойства background-size CSS значение «cover». Это значение указывает браузеру масштабировать ширину и высоту фонового изображения так, чтобы они были равны размерам области просмотра или превышали их.
- Добавить медиа-запрос. Это укажет браузеру отображать фоновое изображение меньшего размера для мобильных устройств, что уменьшит полезную нагрузку и, следовательно, сократит время загрузки.
Для более подробного ознакомления со всем кодом, необходимым для адаптации фоновых изображений, ознакомьтесь с разделом Как добавить изображение и фоновое изображение в HTML.
4. Поместите яркие, красочные изображения в заголовок.
Если у вас есть изображение с яркими цветами или иллюстрациями, рассмотрите возможность размещения его в разделе заголовка вашей домашней страницы. Таким образом, вы можете сразу установить индивидуальность своего бренда и настроение веб-сайта, а затем разместить больше текстового контента ниже. Вот пример заголовка видео, за которым следует более минималистичный раздел:
Источник изображения
Использование фоновых изображений в вашем дизайне
Использование фонового изображения веб-сайта может помочь сразу привлечь внимание посетителя, рассказать историю и сообщить важную информацию. визуальные подсказки. При использовании одного из них вам потребуется учитывать размеры файлов, время загрузки, цвет текста и другие факторы, но если все сделано правильно, фоновые изображения сделают ваш сайт более привлекательным и запоминающимся.