Фоновые изображения для сайтов: Фоновые изображения, картинки, фотографии, фотографии

Где брать красивые фоны для сайтов? — Хабр Q&A

Комментировать

https://unsplash.com/ — природа, пейзажи и разные спокойные фото. Изображений очень много и все они высоком разрешении;
getrefe.tumblr.com — здесь меньше контента, но есть альтернативные категории;
www.splitshire.com — более серьёзная альтернатива предыдущему сайту;
https://picjumbo.com/ — кроме кучи качественных фото есть фича встраивания изображения в разные шаблоны для демонстрации. Для веб дизайна и верстки самое оно.

Ответ написан более трёх лет назад

Комментировать

Комментировать

Белый фон, беспроигрышный вариант. Можно разбавить чем-то таким.

Ответ написан более трёх лет назад

Комментировать

Комментировать

Вот восхитительные градиенты: uigradients.com
А вот старые добрые, прозрачные текстурки: www.transparenttextures.com
—
Можно подобрать неплохое сочетание, при непрозрачности текстуры в 15%-35%

Ответ написан более трёх лет назад

Комментировать

Комментировать

Комментировать

pixabay. com — работают по лицензии Creative Commons (передача в общественное достояние. Бесплатно, большой выбор, примерно 620 000 изображений и векторов, не нужно ссылок на автора или источник)

Ответ написан более трёх лет назад

Комментировать

https://creativemarket.com/inspirationfeed/144145-…
Бывают бесплатные фоны на раздаче.

Ответ написан более трёх лет назад

Комментировать

everypixel — поиск по бесплатным стокам

wallhaven — в основном обои, но это очень хорошая база пикч для веба

Ответ написан более двух лет назад

Комментировать

Где найти красивые фоновые изображения для вашего сайта

Многие WordPress темы идут с поддержкой полноэкранного, паралакс или множественного фона.

Учитывая этот тренд в сфере веб-дизайна, многие пользователи хотели бы знать где можно найти фоновые изображения высокого разрешения. В этой статье мы расскажем вам о сайтах с бесплатными и красивыми фоновыми изображениями, которые можно использовать для вашего WordPress сайта.

Разбираемся с лицензиями и размерами изображений

Все изображения в сети защищаются законом об авторском праве. Даже если авторское право не упоминается, вы автоматически должны понимать, что оно подразумевается.

На просторах Интернета существует несколько сайтов, где вы можете найти бесплатные изображения, которые можно легально использовать на своём сайте.

Так как фоновые изображения занимают весь экран, вам необходимо найти действительно большие изображения. Можно, конечно просто увеличивать изображения, но это может привести к заметной потере качества.

В идеале нужно искать изображения как минимум 1920px по ширине и 1080px по высоте. Для лучшего результата можно брать изображения большего разрешения. Запомните — гораздо проще уменьшить размер изображения, не теряя при этом в качестве.

А теперь давайте рассмотрим несколько замечательных сайтов, где вы можете найти прекрасные фоновые изображения.

1. freeimages

Формально известный как stock.xchng, freeimages.com предлагает огромную коллекцию бесплатных стоковых фотографий, которые можно использовать в качестве фоновых изображений на вашем WordPress сайте. Изображения организованы в рубрики, а также на сайте имеется достаточно хорошая система поиска.

2. StockPhotosFree.com

Простой и удобный сайт StockPhotosforFree.com, с рубриками и поиском, предлагает большую коллекцию изображений высокого качества, которые можно безвозмездно использовать для любых веб-проектов.

3. Subtle Patterns

Subtle Patterns — прекрасный ресурс с бесплатными паттернами. Эти паттерны не слишком броские, что делает их идеальными для веб-страниц. Поиск может осуществляться с помощью тэгов вроде тёмный, светлый, бумага, полоски и проч.

Так же можно купить плагин Subtle Patterns для Adobe Photoshop, чтобы использовать эти паттерны в своих собственных PSD-макетах.

4. Public Domain Archive

Как следует из названия Public Domain Archive, т.е. Архив Общественного Достояния содержит фотографии и изображения, которые не защищены авторским правом. Это значит, что вы можете использовать эти изображения в своих проектах. Изображения распределены по категориям, так что вы сможете с лёгкостью найти идеальное фото для использования в качестве фонового изображения.

5. Unsplash

Usplash предлагает бесплатные фотографии высокого качества, которые можно использовать любым образом, так как они распространяются по лицензии CC0¹.

Сайт публикует 10 новых фотографий каждые 10 дней.

6. picjumbo

Сайт Picjumbo предлагает обширную коллекцию бесплатных стоковых изображений. Навигация по коллекциям осуществляется с помощью рубрик и тэгов. Также сайт предлагает изящную функцию поиска. Все изображения на сайте имеют высокое качество и могут быть с лёгкостью использованы в качестве фонового изображения для вашего WordPress сайта.

7. Magdeleine

Magdeliene — это тщательно подобранная коллекция красивых бесплатных стоковых изображений. Просматривать изображения можно по категориям, тэгам или путём выбора преобладающего цвета. Поиск по цвету очень удобная функция в случае, если вы хотите найти фоновое изображение, которое подходит цветовой схеме вашего сайта.

8. Pixabay

На сайте Pixabay огромная коллекция потрясающих фотографий и векторной графики, которую вы можете бесплатно использовать в ваших проектах. Изображения можно найти через категории или выбор редакции.

9. morgueFile

MorgueFile это ещё одна специально отобранная коллекция бесплатных стоковых фотографий. Сайт быстрый, что делает процесс поиска изображений достаточно лёгким. Некоторые изображения на сайте morgueFile требуют ссылки на источник, так что проверяйте изображения, прежде чем использовать их.

10. Shutterstock

Shutterstock не бесплатный, но точно заслуживает упоминания. Их библиотека фотографий, векторов и иллюстраций просто феноменальна.

Надеемся эта статья помогла вам с поиском идеального фонового изображения для вашего WordPress сайта.

Подписывайтесь на наш блог, если вам понравилась эта статья, а также вступайте в нашу группу Вконтакте.

---

¹Creative Commons CC0 – лицензия, которая пытается перевести проект в общественное достояние в максимальной форме, разрешенной законом. А если закон не позволяет это совершить, автоматически применяет положения разрешительной лицензии. (с сайта https://te-st.ru/2014/12/23/open-project-and-copyright/)

Скачать HD-фоны на Unsplash

Более 900 фоновых изображений для веб-сайтов: Скачать HD-фоны на Unsplash

Исследовать › Фоны › Приложение › Веб-сайт

Ищете красивые изображения для своего веб-сайта? Unsplash позаботился о вас. Найдите идеальный фон для веб-сайта из нашей огромной коллекции изображений профессионального качества. Каждый можно использовать бесплатно!

Животные фоныХудожественные фоныЦветные фоныМилые фоныПрирода фоны

Скачать бесплатно фоновые изображения для сайта

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Nature Imageslandoutdoors

PlantProduceFood Изображения и картинки

Масляная живопись.0003

Hd wood wallpapershardwoodplywood

abyssHd 3d wallpapersup

Car images & picturesautomobilevehicle

Texture backgroundsHd pattern wallpapersfractal

stylefashionhuman

ingolstadtgermanycar racing

offroadHd red wallpapersLight backgrounds

graphicsHd art wallpapersHd green wallpapers

Tree images & picturespathvegetation

Мексика картинки и изображения0003

citySummer images & imagesstreet

–––– –––– –––– – –––– – –––– –– –– –––– – – –– ––– –– –– –– – –.

Nature Imageslandoutdoors

Масляная живопись.0003

Texture backgroundsHd pattern wallpapersfractal

dolomitiItaly pictures & imagescalm

Tree images & picturespathvegetation

grandtetonsnationalparkMountain images & picturesmountain range

asphalttarmacroad

abyssHd 3d wallpapersup

plantproduceFood images & pictures

stylefashionhuman

offroadHd red wallpapersLight backgrounds

пионмузыкальные листычерно-белые фото

Мексика картинки и изображенияairbnbhotel

citySummer images & imagesstreet

sayan Nath

Природа imageslandoutdoors

Eugene Golovesov

Texture backgroundsHd pattern––––––

––––

–––– –– – –– –––– – – –– ––– –– –––– – –.

Катерина Хлизницова

plantproduceFood images & images

Dylann Hendricks | 딜란

stylefashionhuman

САЙМОН ЛИ

oil paintingTexture backgroundsbrush

Nico Iseli

dolomitiItaly pictures & imagescalm

Three Throne Productions

ingolstadtgermanycar racing

Gian Gomez

offroadHd red wallpapersLight backgrounds

Solen Feyissa

graphicsHd art wallpapersHd green wallpapers

Olivie Strauss

пионмузыкальные листычерно-белые фотографии0003

Taru Goyal

dubai — united arab emiratesHd wallpapersmockup

Nahima Aparicio

Mexico pictures & imagesairbnbhotel

Stephen Leonardi

grandtetonsnationalparkMountain images & picturesmountain range

sossusvleideadvleinamibia

Jason Leung

asphalttarmacroad

Sufyan

Hd wood обоидеревофанера

Владислав Нагорный

городскоеЛето фотоулица

愚木混株 cdd20

abyssHd 3d wallpapersup

Martin Katler

Car images & imagesautomobilevehicle

Просмотр премиальных изображений на iStock | Скидка 20% на iStock

Unsplash

Красивые бесплатные изображения, подаренные самым щедрым сообществом фотографов в мире. Лучше, чем любые бесплатные или стоковые фотографии.

• О
• Блог
• Сообщество
• Присоединяйтесь к команде
• Разработчики/API
• Press
• Help Center

Product

• Explore
• Unsplash Awards
• Unsplash for Education
• Unsplash for iOS
• Apps & Plugins

Popular

• Backgrounds
• Free Images
• Free Stock Photos
• Картинки с днем ​​рождения
• Прикольные фотографии
• Картины природы
• Черный фон
• Белый фон
• Текстуры
• Desktop Backgrounds

Wallpapers

• HD Wallpapers
• 4k Wallpapers
• iPhone Wallpapers
• Cool Wallpapers
• Cute Wallpapers
• Live Wallpapers
• PC Wallpapers
• Black Wallpapers
• iPad Wallpapers
• Desktop Wallpapers

• Политика конфиденциальности
• Условия
• Безопасность

• Логотип Twitter в форме птицыUnsplash Twitter
• Логотип Facebook в форме FUnsplash Facebook
• Логотип Instagram в форме квадратной камерыUnsplash Instagram

12 веб-сайтов с потрясающими фоновыми изображениями [+ Лучшие практики дизайна]

Фоновые изображения могут помочь привлечь, вовлечь и информировать посетителей на вашем сайте. В зависимости от дизайна и расположения фоновые изображения могут создавать настроение, обеспечивать контекст о бренде и привлекать внимание посетителей к важным элементам веб-страницы.

В этом посте мы рассмотрим два различных типа фоновых изображений веб-сайтов, которые вы можете использовать, а затем рассмотрим реальные примеры веб-сайтов с этими типами фона. Затем мы рассмотрим некоторые рекомендации по использованию фоновых изображений в дизайне вашего собственного веб-сайта. Давайте начнем.

Фоновые изображения для веб-страниц

Прежде чем приступить к поиску идеального фонового изображения, вы должны знать некоторые общие сведения о фонах веб-сайтов.

Существует два типа фона веб-сайта: фон тела или фон содержимого. Фон тела покрывает большую часть или весь экран. Это может быть изображение, графическая иллюстрация, один цвет, цветовой градиент или текстура. Фон содержимого окружает текст, изображения или другой контент и может быть наложен поверх основного фона.

Возьмем, к примеру, домашнюю страницу нашего блога. Фон тела белый, а фон содержимого светло-голубой. Фон контента помогает сгруппировать избранное изображение, заголовок, категорию и время чтения отдельных сообщений в блоге. Это может помочь посетителям легче просматривать блог и делать более осознанный выбор того, на что нажимать.

При использовании фоновых изображений для веб-страниц вы можете использовать изображения в качестве основного фона и размещать текст непосредственно поверх них. Это распространенный подход к созданию яркой домашней страницы. Вы также можете использовать изображение (или несколько) в качестве фона контента, наложенного на основной фон одного цвета. Это обычный подход для портфолио сайтов.

Давайте взглянем на несколько примеров дизайна фона веб-сайта ниже.

Дизайн фона веб-сайта

1. Варшавский UL
2. Уход за корветом
3. Дизайн зависимостей
4. Сквозь тьму
5. Колоссальный
6. ИНСПИИР
7. Архитекторы Морриса Аджми
8. Студия hipcool
9. Напитки Goldling
10. тыс. +
11. СП
12. Парки Синтры

1. Варшавский UL

Warszawski UL — это интерактивный веб-сайт, использующий анимацию прокрутки и большие фоновые изображения для привлечения и поддержания внимания посетителей. Каждое изображение предлагает поближе познакомиться с интерьером обслуживаемого офиса.

Что нам нравится:  Каждое фоновое изображение, включенное в слайдер главной страницы, содержит оттенки синего, которые соответствуют цвету, используемому в логотипе и других элементах дизайна, что делает общий дизайн более целостным.

2. Уход за корветом

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.