70 больших фоновых изображений для сайта

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

Последний тренд в дизайнах сайтов – использование больших фоновых изображений.

Большие и качественные картинки и фотографии улучшают внешний вид сайта, делают более стильным его дизайн.

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

Да, вы, наверное, и сами обращали внимание на то, как современно и стильно выглядят сайты с большими фоновыми картинками!

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

Итак, приступим …

Если ваш сайт работает на wordpress, фон для него установить очень просто: в админке сайта перейдите по ссылке в левом меню на страницу "Внешний вид (Дизайн) - Фон".

Если такого пункта нет, значит, ваша тема не поддерживает функцию загрузки фона. Тогда ее нужно добавить.

Откройте файл functions.php и вставьте в самый низ файла следующий код:

add_theme_support('custom-background');

На странице настройки фона сайта, выберите пункт "Фоновое изображение" и загрузите его.
Выберите следующие настройки фона:

fon-options

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

Как вставить фон в html?

Теперь нужно вставить в файл стилей style.css следующий код, который придаст адаптивности нашему фону:

body.custom-background {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Если ваш сайт работает не на wordpress, а на другом движке или вообще без него картинку для фона сайта можно добавить так:

body { 
  background: #eeeeee url(http://site.ru/images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src= http://site.ru/images/bg.jpg', sizingMethod='scale')";
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='. http://site.ru/images/bg.jpg', sizingMethod='scale');
}

Обратите внимание, на адрес папки images, содержащей изображение для фона – она должна быть расположена в корне сайта.
Впрочем, вы можете расположить ее в любом другом месте, поменяв ее адрес.

Немного о параметрах фона (background):

Они указывают браузеру, что изображение:

no-repeat - не повторяется
center center - позиционируется по центру
fixed - зафиксировано
#eeeeee - имеет серый цвет фона

background size cover:

Свойство CSS3 background-size масштабирует фоновое изображение с сохранением пропорций.

И последнее: использование префиксов -ms-filter и filter позволит добиться поддержки старых версий браузеров.

Вот, как просто на сайте сделать фон :)

Предлагаю, также, скачать архив фоновых изображений с узором БОКЕ шириной 1920px.

↓ Как всегда, архив доступен для загрузки моим подписчикам

Уже скачали 179 раз(а)

Открыть ↓

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

Пожалуйста, не выкладывайте их на других сайтах!

Если хотите поделиться ими с вашими читателями, просто дайте ссылку на этот пост.

Вот несколько примеров того, что входит в архив:

Фон сайта

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

Фон на сайт с узором Боке

Картинки в стиле Боке

Картинки для фона сайта

Текстура для сайта

Красивое фоновое изображение на сайт

Новый фон для вашего сайта

Всего в архиве 70 изображений.

В следующем посте опубликую пак других фоновых изображений для сайта.

Подписывайтесь на рассылку, чтобы не пропустить это событие :)

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

Также, оставляйте в комментах ссылки на ваши сайты с моими фонами.

Не забудьте проголосовать за этот пост, если вам понравились мои фоны!

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. Спасибо Людмила за красивые фоны.

    • Пожалуйста :).

      Я рада, что они вам понравились.

  2. Добрый день. Спасибо за урок. Изменил фон. Тему использую Adsense Center. Сайт http://edabez.ru/
    Но возникла проблемка. В хроме, а также в мобильной опере заметил, что фоновое изображение подгружается только на главной. На остальных страницах фоновое изображение не грузится.
    На другом сайте, с другой темой все в порядке.
    Может поможете с проблемой?

    • Попробуйте отключить плагины и проверить.
      Похоже, что загрузку фона блокирует какой то из плагинов.

  3. Здравствуйте! Очень красивые изображения для фона. Я скачала, установила.
    Моя тема поддерживает функцию загрузки фона,но, на сайте фон почему то не отображается.
    Какая может быть причина?

    • Возможно, какой то из плагинов тормозит загрузку фона.

      Попробуйте отключить плагины и проверьте.

  4. Привет,Люда!Спасибо за великолепные фоны.Они действительно очень красивы и насыщенные.

  5. Доброго времени, Людмила. Спасибо за фоны.

  6. Здравствуйте, Людмила. Можно ли эту функцию реализовать в теме LifeStyle? Я вставляю код add_theme_support('custom-background'); , но на странице настройки фона сайта нет пункта "Фоновое изображение", куда бы можно было подгружать картинку.

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

      • А в файл стилей style.css код вставлять тоже в самый низ?

      • Попробуйте удалить из body (style.css) background: #e7e3e2;

        • Удалила. Не сработало. Фон не появляется на главной, но отражается в настройках.

          • К сожалению, не видя, что происходит у вас на сайте, подсказать что то сложно.

  7. Добрый день ,Людочка я пользуюсь вашей темой Adsense Center , в програмирование я не сильна ,и разобраться с настройками темы под себя не получается. Хотелосьузнать о теме побольше. Сейчас занимаюсь книгами и хотелось бы на сайте сделать слад бар с книгами , но как это сделать не знаю. Подскажите пожалуйста.
    С большим уважением к ВАМ Валентина.

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

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

Для того чтобы снять блок и увидеть скрытый контент или ссылку на закачку, подпишитесь на обновления блога.

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 195
Отзывов 4349