Последний тренд в дизайнах сайтов – использование больших фоновых изображений.
Большие и качественные картинки и фотографии улучшают внешний вид сайта, делают более стильным его дизайн.
На фоне изображений кнопки навигации приходится выделять цветом, что делает их более заметными, а сам фон служит координационным центром страницы.
70 больших фоновых изображений для кулинарного сайтаДа, вы, наверное, и сами обращали внимание на то, как современно и стильно выглядят сайты с большими фоновыми картинками!
Сегодня я расскажу, как установить фон на сайт и как сделать его адаптивным, т.е. масштабируемым, а заодно поделюсь целым паком больших фоновых изображений для сайта.
Итак, приступим …
Если ваш сайт работает на wordpress, фон для него установить очень просто: в админке сайта перейдите по ссылке в левом меню на страницу "Внешний вид (Дизайн) - Фон".
Если такого пункта нет, значит, ваша тема не поддерживает функцию загрузки фона. Тогда ее нужно добавить.
Откройте файл functions.php и вставьте в самый низ файла следующий код:
add_theme_support('custom-background'); |
На странице настройки фона сайта, выберите пункт "Фоновое изображение" и загрузите его.
Выберите следующие настройки фона:
При настройке не забудьте указать цвет фона - он будет виден на странице, пока картинка для фона сайта еще не загрузилась. Цвет фона выбирайте совпадающий с цветом фоновой картинки.
Как вставить фон в 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.
↓ Как всегда, архив доступен для загрузки моим подписчикам
Открыть ↓
Часть изображений я нашла на бесплатных фотостоках и изменила их размер, а другую часть сделала самостоятельно.
Все изображения бесплатны для личного и коммерческого использования.
Пожалуйста, не выкладывайте их на других сайтах!
Если хотите поделиться ими с вашими читателями, просто дайте ссылку на этот пост.
Вот несколько примеров того, что входит в архив:
Всего в архиве 70 изображений.
В следующем посте опубликую пак других фоновых изображений для сайта.
Подписывайтесь на рассылку, чтобы не пропустить это событие 🙂
Пишите в комментариях, какие фоны вам нужны - если запросов наберется много, сделаю.
Также, оставляйте в комментах ссылки на ваши сайты с моими фонами.
Спасибо Людмила за красивые фоны.
Пожалуйста :).
Я рада, что они вам понравились.
Добрый день. Спасибо за урок. Изменил фон. Тему использую Adsense Center. Сайт http://edabez.ru/
Но возникла проблемка. В хроме, а также в мобильной опере заметил, что фоновое изображение подгружается только на главной. На остальных страницах фоновое изображение не грузится.
На другом сайте, с другой темой все в порядке.
Может поможете с проблемой?
Попробуйте отключить плагины и проверить.
Похоже, что загрузку фона блокирует какой то из плагинов.
Здравствуйте! Очень красивые изображения для фона. Я скачала, установила.
Моя тема поддерживает функцию загрузки фона,но, на сайте фон почему то не отображается.
Какая может быть причина?
Возможно, какой то из плагинов тормозит загрузку фона.
Попробуйте отключить плагины и проверьте.
Привет,Люда!Спасибо за великолепные фоны.Они действительно очень красивы и насыщенные.
Пожалуйста
Доброго времени, Людмила. Спасибо за фоны.
Здравствуйте, Людмила. Можно ли эту функцию реализовать в теме LifeStyle? Я вставляю код add_theme_support('custom-background'); , но на странице настройки фона сайта нет пункта "Фоновое изображение", куда бы можно было подгружать картинку.
Немного покопавшись и вставив прописанные выше коды, удалось добиться того, что в консоли появилась кнопка Фон с настройками. Теперь вот загружаю картинку для фона, в настройке она есть, а на сайте не появляется.
А в файл стилей style.css код вставлять тоже в самый низ?
Нет, в любое место.
Попробуйте удалить из body (style.css) background: #e7e3e2;
Удалила. Не сработало. Фон не появляется на главной, но отражается в настройках.
К сожалению, не видя, что происходит у вас на сайте, подсказать что то сложно.
Добрый день ,Людочка я пользуюсь вашей темой Adsense Center , в програмирование я не сильна ,и разобраться с настройками темы под себя не получается. Хотелосьузнать о теме побольше. Сейчас занимаюсь книгами и хотелось бы на сайте сделать слад бар с книгами , но как это сделать не знаю. Подскажите пожалуйста.
С большим уважением к ВАМ Валентина.
Слайдер - это довольно сложный функционал.
Поэтому, описать добавление его в тему в комментариях невозможно.
Благодарю за помощь!!!!))))