Как сделать фон на сайте

Главная → Фон для сайта

В этой статье я вам расскажу и покажу как сделать фон на сайте посредством наложения любого цвета, градиента или рисунка (фотографии). Но, для начала вам самим необходимо определиться - какой фон вы хотели бы видеть на своей странице. Источник: age-dragon.com/fon-dlya-saita.html

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

  • Как изменить фон сайта
  • Фиксированный полностью фон
  • Наложение полного градиента на фон
  • Как сделать картинку фоном сайта

Параметром для определения фона страницы для браузеров - является свойство background, который имеет ряд различных значений:

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

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

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

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

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

Код для style.css


body {
   background-color: #FFDBEA;
}   

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

Фон градиент - используя рисунок

Код для style.css


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

Посмотреть пример можно Здесь

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

Фиксированный фон

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

Код фиксированной страницы для style.css


body {
  margin: 0;
  background-image: url("images/fon.jpg");
  background-repeat: repeat-x;
  background-color: #c3ced7;
  background-attachment: fixed;
}

Наложение полного градиента на фон

А здесь мы рассмотрим пример, как наложить фиксированный градиент на фон страницы не используя никаких рисунков (фото), только с помощью цвета. Единственный минус - в IE фон скролируется, в остальных же браузерах работает исправно. Источник: age-dragon.com/fon-dlya-saita.html

Код для style.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;
}

Посмотреть пример можно Здесь

Как сделать картинку фоном сайта

Из этого примера вы узнаете как сделать картинку фоном сайта так, чтобы она полностью показывалась на всю страницу при любом разрешении экрана монитроа. Для этого вам необходимо подобрать желаемую картинку с размерами примерно: 1600х1200. Маленькие картинки использовать не рекомендуется, так как при увеличении будет падать качество, да и во-вторых: опять же проблемы с IE - он просто так не увеличивает фото, для этого ему необходимы дополнительные коды и скрипты. Источник: age-dragon.com/fon-dlya-saita.html

Код для style.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;
}

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

Поделись ссылкой с друзьями:

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

uriii 20-11-2013

Спасибо за обучение, а можно статью на тему:
Наложение картинки фона поверх шаблона CSS

Admin 20-11-2013

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