• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Главная → HTML уроки и советы → Свойство CSS background

Свойство CSS background

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

Оглавление
1. Синтаксис CSS background
2. Как сделать фон на сайте html
3. CSS background-color - монотонный фон на сайте
4. CSS background-image - фоновая картинка на сайте
 4.1. CSS background-repeat
 4.2. CSS background-attachment
 4.3. CSS background-position
 4.4. CSS background-size

1. Синтаксис CSS background

background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit;

Где:

  • background-attachment — задает точку привязывания отчета
  • background-color — монотонный цвет фона (можно задавать в формате #RGB, названием цвета и в формате rgb());
  • background-image — задание фоновой картинки;
  • background-position — позиция элемента (сдвиг относительно левого верхнего края);
  • background-repeat — задание повторения элемента (можно задавать повтор по осям, а также указать бесконечное количество повторов);

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

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

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

Лично я всегда выбираю такие шаблоны для сайта, чтобы ширина видимой части контента была не больше 1024 символов. Если посмотреть статистику сайта, то такое разрешение удовлетворяет большой процент пользователей. В будущем это число будет уменьшаться, т.к. новые мониторы с высоким разрешением вытесняют старые (например, full-hd есть почти у каждого).

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

Рассмотрим все варианты по заданию фона на сайте.



3. CSS background-color - монотонный фон на сайте

Свойство CSS background-color - задает цвет фона. Например:

<body style="background-color: #EAEDCC"> ...

В этом случае задан цвет фона всему сайту, поскольку мы его применили к тегу <body>

Еще пример. Зададим тегу <div> по умолчанию зеленый фон:

.div { background-color: rgba(0, 255, 0, 0.5); }

Всю палитру цветов в кодах на html Вы сможете найти тут.

Примечание

Аналогичное свойство есть у html-таблиц, но называется оно bgcolor

.table { bgcolor: #EAEDCC; }

4. CSS background-image - фоновая картинка на сайте

Свойство CSS background-image - позволяет установить фоновое изображение на сайте.


Синтаксис CSS background-image

background-image: "address_image1";

Например, для установки общего (глобального) фона:

<body style="background-image: url('img/superfon.gif')">...

Например фоновая картинка:

Фоновое изображение
Пример использования фонового изображения

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

В CSS3 можно задать несколько фоновых изображений (они как бы накладываются друг на друга как слои).

background-image: url("address_image1"), url("address_image2"), url("address_image3");

Задавая фон в виде картинки есть возможность настраивать так же ряд важных свойств CSS

  • background-repeat
  • background-attachment
  • background-position
  • background-size
  • background-clip

Рассмотрим в отдельности эти параметры


4.1. CSS background-repeat

Свойство CSS background-repeat определяет повторять ли фон. Можно отдельно настраивать повторение по вертикали и горизонтали.


Синтаксис CSS background-repeat

background-repeat: "value";

Где value может принимать следующие значения:

  • repeat-x - повторять фоновое изображение по горизонтали;
  • repeat-y - повторять фоновое изображение по вертикали;
  • no-repeat - не повторять фоновое изображение;
  • repeat (по умолчанию) - повторять фоновое изображение по горизонтали и вертикали;
  • space - все пространство заполняется максимально возможным количеством изображений, первое и последнее (по горизонтали и вертикали) поровну обрезаются;
  • round - аналогично предыдущему, с тем отличием, что первое и последнее масштабируются для заполнения;

Например, по горизонтали не повторять, по вертикали повторять фоновое изображение:

background-image: 'img/superfon.gif'; background-repeat: no-repeat, repeat-y, space;


4.2. CSS background-attachment

Свойство CSS background-attachment задает привязки фона изображения. Можно зафиксировать задний фон, чтобы при прокрутке скроллом он не крутится или же наоборот фон будет прокручиваться вместе с сайтом.


Синтаксис CSS background-attachment

background-attachment: "value";

Где value может принимать следующие значения:

  • scroll (действует по умолчанию) - фон прокручивается вместе с сайтом;
  • fixed - при прокрутке скролла фон остается неизменными;
  • local - изображение прокручивается с контентом, но не с элементом, его содержащим;

Я думаю, что Вы видели такие сайты и понимаете о чем идет речь.


4.3. CSS background-position

Свойство CSS background-position задает расположение фона относительно левого верхнего угла.

Пример использования фонового изображения

Синтаксис CSS background-position

background-position: value [value2];

В параметрах мы указываем выравнивание (смещение) в пикселях или процентах сначала по оси Х, потом по оси У. value, value2 может принимать следующие значения:

  • top - выравнивание по верхнему краю;
  • left - выравнивание с левого края;
  • right - выравнивание с правого края;
  • bottom - выравнивание по нижнему краю;
  • center - выравнивание по центру;
  • число/проценты - можно задавать отступ в виде числа или процентов;

По умолчанию фон располагается в верхнем левом углу.

Можно указывать в пикселях Npx задание отступа от разных краев. Проще понять это на примере:

background-position: right 50px;

Фон будет выравнивать по правому краю со смещением 50 пикселей вниз.

Или например сместим фон на 100px вправо и расположим его по центру относительно высоты.

background-position: 100px 50%;

Все эти параметры можно задать в таблице стилей CSS. Этот параметр выравнивает расположение фона на странице.


4.4. CSS background-size

Свойство CSS background-size позволяет задавать размеры фона.


Синтаксис CSS background-size

background-size: value value2;

Где первый параметр задает значение по оси Х, второй параметр по оси У. Можно задавать как в процентах, так и пикселях.

background-size: 50px 70px;

Так же может принимать два статичных параметра

  • contain - масштабирует изображение по длинной стороне (заполняет все пространство)
  • cover - масштабирует изображение по короткой стороне (заполняет все пространство)

Напоследок запишем все атрибуты вместе:

... <body style="background-image: url(fon.gif); background-repeat: repeat-x; background-position: top;"> ...

Для обращения к float из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.background="VALUE"


Читайте также:
• Как убрать подчеркивание ссылки
• Как сделать кнопку на сайте ссылкой
• Какой выбрать шрифт для сайта
• Спецсимволы HTML
• Как добавить социальные кнопки на сайте
• Коды и названия html цветов для сайта
• Как сделать обтекание картинки текстом

← Перейти в каталог html уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2021 - Zarabotat-Na-Sajte.ru