Как сделать картинку фоном в html и css. 3 простых способа

Несколько фоновых изображений

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

div {
  height: 360px;
  width: 400px;
  border: 3px solid #333;
  background: url('../img_flwr.gif') bottom right no-repeat,
              url('../img_tree.gif') repeat-x;
}

Попробовать »

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

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

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

div {
  height: 360px;
  width: 400px;
  border: 3px solid #333;
  background: url('../image.png'),
              url('../img_flwr.gif') bottom right no-repeat,
              url('../img_tree.gif') repeat-x;
}

Попробовать »

Если переставить наши картинки местами, сделав первую последней в списке, то она будет отображаться под всеми остальными изображениями, задавая основной фон для элемента:

div {
  height: 360px;
  width: 400px;
  border: 3px solid #333;
  background: url('../img_flwr.gif') bottom right no-repeat,
              url('../img_tree.gif') repeat-x,
			  url('../image.png');
}

Попробовать »

Видеофон

Любая анимация сделает ресурс живым, будет смотреться довольно стильно. И не будет напрягать глаз.

Все, что движется на вашем сайте, несомненно привлечет посетителя

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

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

И, тем более, не размещайте важный контент поверх видеофона.

Сплошной цвет фона

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

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

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

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

Эксперимент с текстурами

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

 И тут лучшее решение – поэкспериментировать с текстурами. Пример: текстуры древесины или текстиля. Любая типографика будет отлично смотреться  на подобном фоне. 

Можно использовать темные и стильные карбоновые текстуры. Они добавляют сайту шарм и неповторимость.

• Подобный фон позволит легко читать любой контент
• Создаст ощущение комфорта 
• Будет легко сочетаться с любым изображением на странице

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

Не стоит недооценивать силу выразительного и правильно подобранного фона. Проявите всю свою фантазию и креатив.

И посетители будут уходить от вас только с положительными эмоциями!

Множественные фоны

Таблицы CSS позволяют сделать фон, состоящим из нескольких слоев изображений, количество которых определяется числом значений, вводимых последовательно через запятую после background-image. При этом картинки ложатся друг под друга сверху вниз, начиная с первого. Каждую из них можно определить с помощью указания значений других свойств, имеющих отношение к изображению. Присваивая слою состояние прозрачности, его можно скрывать.

Таким образом, установка значений свойств фона в CSS дает возможность окрасить его в любой цвет, приняв в учет различные элементы блока (свойства и ). Вместо этого или дополнительно внутри элемента можно поместить фоновое изображение, выбрав для него определенное место, увеличив или уменьшив при этом, а также при необходимости повторив его в горизонтальном или/и вертикальном направлении (свойства , , , , , ).

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

Иконка рядом с текстом

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

Сперва ничего особенного — обычная ссылка:

Вся магия в CSS:

• Сначала задали путь до изображения.
• Потом установили начальное положение фона (background-position) в left center — ведь наша иконка левее текста (горизонтальная позиция left) и на одном с ним уровне (вертикальная позиция center).
• Размер фонового изображения (background-size) мы задали, чтобы предотвратить отдалённые проблемы.Дело в том, что иконка может оказаться больше блока, в котором её захотят показать. Тогда она некрасиво обрежется по бокам. Чтобы этого не произошло — указываем размеры, в которые иконка должна вписаться.

И наконец, устанавливаем режим повторения фона (background-repeat) в no-repeat. Без этого фоновая картинка будет дублироваться, пока не заполнит собой блок (как это выглядит — зависит от размеров картинки и html-элемента, где она задана фоном).

Что же мы получили:

Не совсем то, чего ожидали. Давайте разбираться.

Наш «конвертик» стал фоновым изображением для блока, который занимает ссылка. Текст ссылки — это содержимое того же блока. Оно и наложилось на наше фоновое изображение.

Значит, нужно отодвинуть это самое содержимое от левой границы блока (помните, мы прижали «конвертик» именно к левому краю). Причём отодвинуть более чем на 20px (ширина фоновой картинки, заданная background-size) — тогда увидеть наш фон уже ничто не помешает.

Делается это с помощью свойства padding (внутренний отступ).

Добавим в код такой отступ слева:

Вот теперь всё вышло как надо:

Как изменить фон презентации

Главный вопрос: а нужен ли фон вашей презентации?

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

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

‍Что такое фон в слайдах PowerPoint

Фон в презентациях PowerPoint — это изображение, фотография или паттерн, размещаемые на слайдах под текстом, графиками, таблицами и другим контентом.

В PowerPoint есть два способа использования фона:

• Фон, встроенный в шаблоны презентации
• Отдельный фон для одного или нескольких слайдов

Фон в шаблоне презентации

Работа с шаблонами презентации в PowerPoint — это отдельная и очень важная тема. Мы обязательно сделаем отдельный мануал об этом. Для того, чтобы поменять фон сразу для всех слайдов, перейдите в режим редактирования шаблонов. На вкладке «Вид» нажмите кнопку «Образец слайдов».

В левой части окна откроется список шаблонных слайдов. Чтобы настроить фон для всех слайдов, прокрутите список вверх и выберите «Образец слайдов».

Кликните правой кнопкой по «Образцу слайдов» и в открывшемся меню выберите последний пункт — «Формат фона»

В правой части окна PowerPoint откроется панель форматирования фона. Здесь вы можете выбрать между несколькими вариантами фона:

• Сплошная заливка — вы просто выбираете сплошной цвет фона. Как мы писали выше, чем проще цвет фона, тем легче будут читаться ваши тексты и другая информация.
• Градиентная заливка — это плавный переход от одного цвета к другому. В PowerPoint вы можете задать сразу несколько цветов градиента, но лучше этим не злоупотреблять. Градиенты часто использовались в дизайне в конце 80-хх — начале 90-хх годов прошлого века и поэтому сейчас многие считают этот прием устаревшим.
• Рисунок или текстура — фоновое изображение, загруженное из файла фотографии.
• Узорная заливка — узор или паттерн, генерируется самой программой по заданным вами параметрам.

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

Выберите вариант заливки Рисунок или текстура на панели форматирования фона и нажмите кнопку «Файл».

В открывшемся окне найдите изображение, которое вам нравится, и нажмите кнопку «Вставить»

Обратите внимание, что фон стал одинаковым для всех макетов

Для возврата к редактированию слайдов на вкладке «Вид» выберите «Обычный режим».

Выбор фона для каждого слайда в отдельности

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

Проверьте, что у вас выбран «Обычный режим» редактирования, а не не режим «Образец слайдов». Щелкнете правой кнопкой мыши по слайду, в котором нужно заменить фон и выберите пункт меню «Формат фона».

Теперь давайте выберем вариант со сплошной заливкой фона. В открывшейся справа панели выберите вариант «Сплошная заливка». Далее щелкните по кнопке «Цвет заливки», как показано ниже, и выберите нужный вам цвет фона.

Цвет фона поменяется на выбранном слайде.

Где можно найти фотографии для фона

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

Если таких фотографий у вас нет, то есть несколько ресурсов, которые распространяют фотографии по лицензии Creative Commons или аналогичной лицензии. Это тип лицензии позволяет:

• Свободно использовать фотографии в любых целях, в том числе коммерческих
• Размещать фотографии без указания имени автора

Вот эти ресурсы:

Подписывайтесь на VisualMethod в Facebook, Вконтакте или Telegram

Background-size

Определяет размер фонового изображения.

div {
    background url(my-image.jpg);
    background-size 100% 100%;
    background-repeat no-repeat;
}

Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

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

Как сменить фон, используя плагины для браузеров на компьютере?

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

В настройках меню каждого обозревателя есть вкладка «Расширения» или «Дополнения». Там нужно найти ссылку для перехода в официальный магазин разработчиков. Почти все утилиты скачиваются совершенно бесплатно.

Просто напечатайте в поисковой строке такой запрос, как: «изменить фон для ВК» и начните экспериментировать. Достаточно скачать плагин и установить его на устройство. Теперь на вашей странице в ВК появится новый значок – через него вы попадете в раздел с оформлением основного полотна страницы.

#1 Google Chrome

• Откройте браузер, щелкните на 3 вертикальные точки в правом углу и найдите пункт «Настройки»;
• Оказавшись в разделе, слева кликните по главному меню (3 горизонтальные полоски);
• Разыщите команду «Расширения», переходите внутрь;
• Снова кликните по меню (3 полоски слева) и в самом низу выбирайте команду «Переход в магазин Chrome»;
• Забейте в поисковую строку «Фон для ВКонтакте» и установите галочку на фильтре «Расширения»;

Выбирайте из предложенных вариантов: VKMod, VK Color changer или другие из открывшегося списка.

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

#3 Яндекс

• Интерфейс немного похож на Google Chrome – пункт настроек вы разыщете по тому же маршруту;
• Далее найдите команду «Дополнения»;

В самом конце подменю находится «Каталог дополнений»;

• После перехода найдите поисковик и вбейте нужный запрос;
• Попробуйте плагин «Фон ВКонтакте»;
• Последующий алгоритм действий аналогичен двум, приведенным выше.

После клика на значок вы сможете установить нужные настройки.

Многие дополнения включают интересную опцию – конструктор для самостоятельного создания фона. Эта фишка позволяет подставить любую понравившуюся картинку или даже собственное фото. Функция есть у VKMod, Get-style, VK style, VKOpt и подойдут они для любого обозревателя.

Преимущества:

1. Плагины легко найти и установить;
2. Расширения, загруженные с официальных сайтов разработчиков браузеров безопасны;
3. Для каждого обозревателя существуют десятки дополнений – выбирайте на свое усмотрение.

Недостатки:

1. Чтобы видеть фон, придется постоянно пользоваться этим браузером;
2. Для всех остальных пользователей аккаунт будет отображаться в привычных бело-голубых цветах;
3. Иногда плагины глючат, некоторые напрочь не желают устанавливаться на конкретных компах.

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

Делаем новый фон для сайтов

Существуют различные способы отыскать подходящую идею для фонового рисунка:

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

Создаем фон с помощью одного цвета

Это наиболее простой способ создать задний фон. Сегодня так практически никто не поступает. Но если вы решили сделать одноцветный фон, необходимо перейти в файл style.css и отыскать значение – body (оно отвечает за основное тело сайта). Теперь  необходимо прописать функцию background-color, если ее не было, и указать код цвета. В том случае, когда вам необходимо создать задний фон для белого сайта, придется прописать следующий код:

Вы сможете найти полный перечень цветов на сайте – (STM). Для изменения цвета, просто регулируйте значение после двоеточия и наслаждайтесь результатами.

Создание фона при помощи текстуры

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

В этом коде есть знакомый нам параметр для поддержания цвета (он зеленый) и элемент, который отвечает за подключение текстуры зеленого цвета.

Делаем фон с помощью градиента

Любое изображение, которое подключается за счет css функций, можно повторять, как по горизонтали, так и по вертикали (по осям X и Y). Такая возможность позволяет нам создать любой красивый фон для сайта css. Начните с создания градиента шириной в 1 мегапиксель (см. картинку ниже), сохраните его, как изображение, и загрузите на хостинг. Далее вам придётся немного поработать с кодом. Вставьте следующие строки:

Внутри него используется функция, позволяющая сменить фон. Сразу после неё следует параметр, отвечающий за цвет вашего задника, и функция, повторяющая его по оси X.

Используем большие картинки для фона сайта

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

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

Для масштабирования изображения существует свойство background-size. Именно оно отвечает на вопрос, как сделать фон в HTML на весь экран. Если установить этот параметр на 100%, фон займёт всю ширину окна браузера.

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

Связь с аудиторией

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

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

Это шанс показать свой продукт, какое-то место или себя в лучшем свете:

Пример, как сделать задний фон сайта ярким и привлекательным

Найдите в интернете высококачественные изображения

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

Каждое изображение, будь то фотография или логотип, должно иметь наиболее подходящий формат.

Профессиональный совет. Если размер файла слишком велик, используйте инструмент TinyPNG или TinyJPG, чтобы уменьшить размер файла без ущерба для качества.

Идеальный размер

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

Используйте альбомную ориентацию, а не портретную, поскольку она больше подходит для современных компьютерных мониторов. Минимальное разрешение на большинстве ПК составляет 1024 на 768 пикселей. Поэтому лучше использовать фоновое изображение шириной около 2000 пикселей. Если вы загрузите изображение с минимальным разрешением, оно будет выглядеть в стиле 80-х годов.

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

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

Профессиональный совет. Размер изображения в пикселях можно узнать, кликнув правой кнопкой мыши по файлу изображения и выбрав пункт «Свойства». А затем перейдя на вкладку «Сводка». На Mac, кликнув правой кнопкой мыши по файлу изображения и выбрав пункт «Получить информацию», а затем пункт «Дополнительная информация».

Настройка фокуса

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

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

Используйте функцию «Фокус» для фонового изображения.

Видеофон

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

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

Это тоже может дать результат.

Чтобы добавить видео на свой Jimdo сайт, нужно выбрать ролик с YouTube или Vimeo. А также найти бесплатные видеоролики на таких сайтах, как Pond5 или AllTheFreeStock.

Профессиональный совет. Постарайтесь, чтобы ваше видео было коротким.

Однотонные цветные фоны

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

Сайт Unger music использует яркий, веселый оранжевый цвет, чтобы показать свою игривую сторону.

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

Профессиональный совет: Ищете что-то более натуральное? Попробуйте поэкспериментировать с текстурами, например, дерева или текстиля.

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

Добавление рисунка к тексту

С помощью фонового изображения можно автоматизировать процесс добавления рисунков
к определенному тексту, например, к заголовкам. Для этого используется универсальное свойство background, которое применяется к нужному
селектору. В качестве значения указывают путь к рисунку и, чтобы он не повторялся,
аргумент no-repeat (пример 4).

Пример 4. Добавление рисунка

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

Дополнительные параметры фоновой картинки для сайта

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

В код, приведенный выше можно добавить следующие параметры:

1. 1.Свойство background-repeat. Можно задать следующие значения:
   • repeat – повтор фона по вертикали
   • no-repeat – нет повтора
   • repeat-x – замостить по горизонтали
   • repeat-y – замостить по вертикали
2. 2.Свойство background-position. Имеет несколько основных параметров:
   • top left – выровнять фон по верхнему левому краю
   • top right — выровнять фон по верхнему правому краю
   • bottom right – выровнять по нижнем правому краю
   • bottom left– выровнять по нижнем правому краю
   • top center — выровнять фон горизонтально по центру, а вертикально по верхнему краю
   • center – позволит выровнять фон по центру страницы как по горизонтали так и по вертикали.

   Также background-position можно задавать в процентах или пикселях.
   В этом случае это будет выглядеть так:

   CSS

   background-position: 30px 50%;

   1	background-position30px50%;

   где, 30px – это отступ сверху, а
   50% — это положение по горизонтали (отступ слева)

   Таким образом, при использовании этого свойства на первом месте стоит значение позиционирования по вертикали (top, bottom, center, проценты или пиксели), а на втором значение по горизонтали (left, right, center, проценты или пиксели)

3. 3.Привязка фона при помощи свойства background-attachment:
   • fixed – фон остается на месте при прокручивании страницы
   • scroll – фон прокручивается вместе со страницей

4. 4.Растянуть фоновое изображение для сайта по ширине:

   CSS

   background-size: 100% auto!important;

   1	background-size100%auto!important;

5. 5.Растянуть фоновую картинку по высоте и по ширине:

   CSS

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   -ms-background-size: cover;
   background-size: cover;

   1 2 3 4 5

   -webkit-background-sizecover; -moz-background-sizecover; -o-background-sizecover; -ms-background-sizecover; background-sizecover;

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

CSS

body {
background:url(‘../images/ bg-fon.jpg’);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
background-size: 100% auto;
}

В случае если вы задаете фон для сайта, сделанного на CMS, то возможно вы можете столкнуться с тем, что данные стили не будут срабатывать. Это может произойти из-за того, что в теме оформления уже где-то были заданы стили для свойства background. В этом случае для каждого свойства нужно приписать правило !important, а так же более детально изучить вёрстку данной темы.

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

Если статья была для вас полезной – не забудьте поделиться ею в соцсетях, а так же подписаться на рассылку.

А на сегодня у меня все. До встречи в следующих статьях.

С уважением Юлия Гусарь

Background-repeat

Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

• background-repeat: repeat-x — изображение повторяется только по горизонтали
• background-repeat: repeat-y — изображение повторяется только по вертикали
• background-repeat: repeat — изображение повторяется по горизонтали и вертикали
• background-repeat: no-repeat — изображение не повторяется

background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

• background-attachment: scroll — прокручивается вместе со страницей
• background-attachment: fixed — при прокрутке фон остается неподвижным

Как задать фоновое изображение для сайта через CSS?

Конечно, это очень удобно, если ваша CMS поддерживает установку фоновой картинки для сайта из админки. Но что же делать, если такой возможности нет или ваш сайт сделан без CMS?

В этом случае фоновую картинку для сайта лучше всего установить через css-стили. Для этого:

Вместо bg-fon.jpg – будет название вашего файла с фоновым изображением.
Вместо images может быть название вашей папки с изображениями, в том случае если она называется по другому.

В моем случае фоновая картинка для сайта находится в папке «images» в папке темы на одном уровне вложенности с файлом стилей, поэтому я указала относительный адрес расположения картинки.

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

CSS

body {
background:url(‘../images/ bg-fon.jpg’);
}

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