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

Где брать красивые фоны для сайтов? — Хабр 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 позаботился о вас. Найдите идеальный фон для веб-сайта из нашей огромной коллекции изображений профессионального качества. Каждый можно использовать бесплатно!

Фоны с животными

Художественные фоны

Цветные фоны

Симпатичные фоны

Природа фоны

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

Hd grey wallpapers

Beach backgrounds

sea beach

studio

photo studio

Light backgrounds

iceland

sólheimajökull glacier

Mountain images & pictures

switzerland

fribourg

afroamericano

plant

blossom

agapanthus

moody mountains

colorado

fall colors

Hd ocean wallpapers

Hd water wallpapers

crashing wave

empty

acoustic guitar

live music

soil

Nature images

на открытом воздухе

изображения цветов

изображения цветов

красота

коричневый фон

коридор

дом

UT

Солт -Лейк -Сити

Banister

Архитектура

Ландшафтные изображения и картинки

HD City Wallpapers

Namib Desert

Изображения пустыни

Temple

Дерево -изображения

Temple

Tree Tree Tree. Изображения и изображения продуктов питания

Изображения и изображения фруктов

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

США

мода

стиль

Ричмонд

Kew Gardens

UK

Mexico Pictures & Images

Jalisco

Zapopan

Greece

Chania

View

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

Серые обои Hd

Пляжные фоны

Морской пляж

Исландия

Ледник Солхеймайёкюдль

Горные изображения и картинки

Растения

Цветы0003

agapanthus

Hd ocean wallpapers

Hd water wallpapers

crashing wave

usa

fashion

style

Flower images

Flower images

beauty

Brown backgrounds

corridor

building

architecture

Пейзажи и картинки

Городские обои Hd

Сад

Храм

Деревья картинки и картинки

Food images & pictures

Fruits images & pictures

Apple images & photos

soil

Nature images

outdoors

Mexico pictures & images

jalisco

zapopan

studio

photo studio

Light фоны

ут

солт-лейк-сити

перила

швейцария

фрибург

афроамерикано

пустыня намиб

sand

Desert images

moody mountains

colorado

fall colors

empty

acoustic guitar

live music

richmond

kew gardens

uk

greece

chania

aerial view

Nelly Antoniadou

Серые обои Hd

Пляжные фоны

морской пляж

Antonio Grosz

Коричневые фоны

коридор

здание

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

Isaac Macdonald

Studio

Photo Studio

Световые фоны

Elise Wilcox

UT

Солт -Лейк -Сити

Banister

Job Savelsberg

Icland

Saisterhemakull. Пеллегрини

архитектура

Landscape images & pictures

Hd city wallpapers

Joice Kelly

switzerland

fribourg

afroamericano

Lasse Møller

plant

blossom

agapanthus

namib desert

sand

Desert images

Eleanor Brooke

сад

храм

изображения и картинки деревьев

Madison Kuhn

угрюмые горы

colorado

Осень Цвета

Blake Cheek

HD Океанские обои

HD Water Walpapers

Crashing Wave

ANA Curcan

Food Images & Pictures

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

Apple Изображения Apple и Photo Photo. пустой

акустическая гитара

живая музыка

Элиз Уилкокс

США

мода

стиль

Кайл Спалинджер

soil

Nature images

outdoors

James Kirkup

richmond

kew gardens

uk

Sander Weeteling

Flower images

Flower images

beauty

Roman Lopez

Mexico pictures & images

jalisco

сапопан

manos koutras

греция

chania

вид с воздуха

Просматривайте премиум-изображения на iStock | Скидка 20% на iStock

Unsplash

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

• About
• Blog
• Community
• Join the team
• Developers/API
• Press
• Help Center

Product

• Explore
• Unsplash Awards
• Unsplash for Education
• Unsplash for iOS
• Приложения и плагины

Popular

• Backgrounds
• Free Images
• Free Stock Photos
• Happy Birthday Images
• Cool Photos
• Nature Pictures
• Black Backgrounds
• White Backgrounds
• Textures
• Desktop Backgrounds

Wallpapers

• HD обои
• 4k обои
• iPhone обои
• классные обои
• милые обои
• Live Wallpapers
• PC Wallpapers
• Black Wallpapers
• iPad Wallpapers
• Desktop Wallpapers

• Privacy Policy
• Terms
• Security

• Twitter logo in the shape of a birdUnsplash Twitter
• Facebook logo in форма FUnsplash Facebook
• Логотип Instagram в форме квадратной камерыUnsplash Instagram

12 Веб-сайты с потрясающими фоновыми изображениями [+ Best Design Practices]

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

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

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

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

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

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

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

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

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

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

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.