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

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

0 1 158

фон для сайта

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

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

Параметром для определения фона страницы для браузеров - является свойство 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
<style>
   background-color: #FFDBEA;
</style>

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

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

Код для файла style.css
<style>
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.css
<style>
body {
  margin: 0;
  background-image: url("images/fon.jpg");
  background-repeat: repeat-x;
  background-color: #c3ced7;
  background-attachment: fixed;
}
</style>

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

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

Код для файла style.css
<style>
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.css
<style>
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>

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

Похожие новости