Главная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).

Как изменить фон сайта

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

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


<style type="text/css">
   background-color: #FFDBEA;
</style>

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

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


<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; и тем самым зафиксируем наш фон.

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


<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 фон скролируется, в остальных же браузерах работает исправно.

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


<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 - он просто так не увеличивает фото, для этого ему необходимы дополнительные коды и скрипты.

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


<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-ackground-size: 100% 100%;
  background-attachment: fixed;
}
</style>

Рейтинг: 4.6/5     Оценили: 19

Похожие публикации

Комментарии к статье 0