Содержание страницы
домикГлавная / Элементы html и css / Как сделать фон
фон для сайтаВ этой статье я вам расскажу и покажу как сделать фон на сайте посредством наложения любого цвета, градиента или рисунка (фотографии). Но, для начала вам самим необходимо определиться - какой фон вы хотели бы видеть на своей странице.

Содержание страницы

  • Как изменить фон сайта
  • Фиксированный полностью фон
  • Наложение полного градиента на фон
  • Как сделать картинку фоном сайта
Параметром для определения фона страницы для браузеров - является свойство background, который имеет ряд различных значений:

Свойства и значения для фона

  • background-attachment: позволяет фоновому изображению быть зафиксированным, или прокручиваться с основным контентом, в зависимости от выбранного значения (fixed | scroll);
  • background-color: позволяет определить цвет фона страницы, в зависимости от выбранного значения (#...... | transparent);
  • background-image: отображает фон страницы в виде указанной картинки (фото) и имеет два значения (url() | none);
  • background-repeat: позволяет повторяться рисунку указанному в background-image в разных направлениях, в зависимости от выбранного значения (no-repeat | repeat | repeat-x | repeat-y).


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

Однотонный цвет фона (для примера: розовый)

cssCOPY
<style type="text/css"> background-color: #FFDBEA; </style>
Для тех, кто не знает каким путём лучше подобрать цвет: наберите в поисковике "цвет онлайн", и он вам выдаст дюжину хороших сервисов для генерации цветов в онлайн режиме.

Код Фон градиент с рисунком для фона

cssCOPY
<style type="text/css"> body { background-image: url("images/fon.jpg"); /* Указываем путь к рисунку */ background-repeat: repeat-x; /* Рисунок повторяется по горизонтали */ background-color: #c3ced7; /* Цвет заполняющий остальное пространство */ } </style>

Пример фона градиент с рисунком

Фон градиент с рисунком
В этом примере: fon.jpg - это подготовленный заранее рисунок с наложенным градиентом, где ширина его составляет всего 2px (рекомендуется в пределах от 1 до 5 px), а высота условно с размер шапки - 200px, её вы подгоняете соответственно под себя.
А основной цвет background-color: #c3ced7; - берётся из самой нижней точки этого же рисунка.


Из нашего примера очень отчётливо видно, что наш фон скролируется (перемещается) вместе с содержимым страницы. И теперь мы добавим в наш код background-attachment: fixed; и тем самым зафиксируем наш фон.

Код для фиксированного фона

cssCOPY
<style type="text/css"> body { margin: 0; background-image: url("images/fon.jpg"); background-repeat: repeat-x; background-color: #c3ced7; background-attachment: fixed; } </style>


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

Код полного градиента для фона

cssCOPY
<style type="text/css"> body { margin: 0; background: linear-gradient(#0A8CCD, #B1E3FB); background: -webkit-gradient(linear, left top, left bottom, from(#0A8CCD), to(#B1E3FB)); /* для webkit */ background: -moz-linear-gradient(top, #0A8CCD, #B1E3FB); /* для firefox 3.6+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A8CCD', endColorstr='#B1E3FB', gradientType='0'); /* для IE */ background-repeat: no-repeat; background-attachment: fixed; } </style>


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

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

Код для фона в виде картинки

cssCOPY
<style type="text/css"> body { margin: 0 auto; padding: 0; background: #ffffff url('images/fone.jpg'); background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; -ms-background-size: 100% 100%; background-attachment: fixed; } </style>
Дата публикации: 07.08.2018
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!