Body background


Фон является важной частью веб-страницы. По умолчанию он имеет белый цвет. Но язык HTML предоставляет несколько вариантов изменения его свойств. В интернете большинство сайтов — с красочным фоном, в том числе с анимацией. На них присутствует различная графика или фоновые изображения. Настройка стиля фона для веб-сайтов осуществляется с помощью атрибута <style> — background в HTML. Существует несколько свойств CSS, используемых для настройки фона элемента.

Атрибуты для изменения параметров фона

В коде, написанном на языке HTML, background устанавливается как для всей страницы, так и для отдельных ее элементов. Ранее для этого использовался тег <body>, но теперь подобная практика считается устаревшей. Атрибут применялся до спецификации 4.01 и так записывался в HTML: <body background=»»>. Сейчас самый простой способ для изменения значения по умолчанию — это задать свойства атрибуту background-color для тега <body>.

Существует пять основных атрибутов, которые используются в HTML и CSS для изменения фона:


  • -color — указывает, какой цвет будет использоваться для заливки;
  • -image — устанавливает изображение для фона;
  • -position — указывает, куда поместить фоновое изображение;
  • -repeat — определяет, является ли изображение повторяющимся;
  • -attachment — определяет, будет ли изображение прокручиваться вместе со страницей;
  • -size — задает фону определенный размер;
  • -origin — определяет область для позиционирования фонового изображения;
  • -clip — определяет, как фоновое изображение или фоновый цвет отображается под границами элемента.

Первые пять свойств могут быть объединены в один короткий атрибут — background. Атрибут работает в браузерах Firefox, Safari, Opera, IE8. Только в устаревших IE7 и IE6 фон не включает в себя границы.

Как изменить цвет фона в HTML

Атрибут “цвет фона” (background-color в HTML и CSS) заполняет страницы сплошным цветом. Существует несколько способов задать цвет, используя разные форматы:

  • -color: red;
  • -color: rgb(0, 0, 255);
  • -color: #2500ff.

Для фона может быть установлено свойство transparent, отвечающее за степень прозрачности и позволяющее сделать любые элементы под ним видимыми.

Как установить фоновую картинку

Background-image — это свойство, позволяющее указать изображение, которое будет отображаться вместо фона.


о задается при помощи кода CSS и языка HTML: background-image: url(image.jpg). Код очень прост, но для того чтобы он работал, картинка должна находиться в той же папке, что и файлы со стилями. Если это не так, в скобках нужно указать правильный адрес, например: background-image: url(images/image.jpg). Фоновое изображение может быть использовано в сочетании с background-color. Если оно не повторяющееся, то остальное, не закрытое картинкой пространство, будет иметь цвет, заданный в этом свойстве.

Положение фона

Атрибут CSS и HTML background-position управляет расположением фонового изображения и определяет, где именно оно находится в элементе. С его помощью можно указать, где будет находиться верхний левый угол изображения относительно верхнего левого угла элемента. Сначала в свойстве записывается положение по горизонтальной оси координат, а затем — по вертикальной. Для этого удобнее использовать пиксели.

Например:

  • -position: 0 0 — используется по умолчанию и указывает на расположение фона в верхнем левом углу элемента;
  • -position: 100px 0 — сдвинет изображения вправо;
  • -position: -100px 0 — сдвинет изображение влево;
  • -position: 0 100px — опустит изображение вниз.

Атрибут background-position также работает с другими значениями, ключевыми словами и процентами. Они могут быть полезны, если размер элемента не задан в пикселях.

Как использовать ключевые слова для расположения фона

Ключевые слова можно использовать для задания координат по горизонтальной и вертикальной оси, при этом неважно, в какой последовательности они записываются. Варианты ключевых слов для горизонтальной оси:

  • left;
  • center;
  • right.

Для вертикальной оси:

  • top;
  • center;
  • bottom.

При работе с другими единицами измерения сначала задаются координаты по горизонтальной оси, а затем по вертикальной. Например, background-position: bottom right. Процентные значения используются аналогичным образом. При этом точка отсчета находится в верхнем левом углу окна браузера. Пример использования процентов: background-position: 100% 50%. Это значит, что изображение сместится вправо и окажется в центре правой части элемента. Тот же эффект можно получить, если использовать свойство: right center. Если применять значение background-position: 100% 100%, тогда фон окажется в правом нижнем углу элемента.

Повторение фона

По умолчанию при установке изображения в качестве фонового, оно повторяется как по горизонтали, так и по вертикали, пока не будет заполнено все окно браузера или элемент. Но иногда требуется, чтобы изображение показывалось только один раз или располагалось только в одном направлении. Для этого в CSS и HTML для background понадобятся следующие атрибуты:

  • -repeat: repeat — по умолчанию, изображение повторяется до полного заполнения элемента;
  • -repeat: no-repeat — изображение не повторяется и используется на странице только один раз;
  • -repeat: repeat-x — повторение только по горизонтальной оси;
  • -repeat: repeat-y — повторение только по вертикальной оси;
  • -repeat: inherit — браузер использует значение, присвоенное родительскому элементу.

Атрибут для полосы прокрутки

В HTML background-attachment определяет, что происходит с картинкой, когда пользователь прокручивает страницу. У этого атрибута есть несколько свойств: scroll, fixed и inherit. Inherit сообщает, чтобы background-attachment наследует свойство своего родителя. Для правильного использования background-attachment, нужно задуматься о том, как пользователь будет взаимодействовать с окном просмотра. Окно просмотра — это раздел вашего браузера, который отображает веб-страницу. При прокрутке сайта вниз, оно не перемещается. Вместо этого содержимое страницы прокручивается вверх, но создается впечатление, что в окне браузера страница прокручивается вниз.

При установке свойства HTML background-attachment: scroll, браузеру сообщается, что фон должен прокручиваться вместе с элементом. Фон “прилипает” к элементу и прокручивается, пока не исчезнет. Это значение по умолчанию для background-attachment. Но когда устанавливается свойство background-attachment: fixed, то фон должен оставаться на своем месте и не сдвигаться вместе с контентом. При прокрутке страницы вниз, он всегда остается видимым.

Как коротко записать свойства background


Вместо того, чтобы каждый раз писать отдельно все эти правила, их можно объединить их в одно и записать в следующем виде: background: <color> <image> <position> <attachment> <repeat>. И не нужно указывать каждое значение отдельно. Если свойство не используется, вместо него будет срабатывать значение по умолчанию. Важно отметить, что фоновое изображение появляется только в тех областях, где присутствует родительский элемент. Даже когда оно расположено относительно окна браузера, то не будет отображаться, если его родительский элемент не виден. В CSS3 можно использовать более одного изображения для фона элемента. Код будет таким же, как CSS2, только адреса отдельных изображений нужно отделить запятой. Первое из них будет расположено в верхней части элемента, а последующие просто наслоятся на него.

Свойство background-size

Иногда для сайта нужно задать фон определенного размера. Атрибут , который для этого используется в HTML — background-size. У этого свойства существует ряд возможных значений:

  • -size: contain — масштабирует изображение таким образом, чтобы оно соответствовало элементу, сохраняя при этом пиксельное соотношение сторон;
  • -size: cover — разворачивает изображение для заливки элемента, сохраняя пропорции;
  • -size: 100px 100px — масштабирует изображение до указанных размеров;
  • -size: 50% 100% — масштабирует изображение до указанных размеров, проценты относятся к размеру содержащего элемента.

Размер background в HTML для Firefox до версии 4.0 задается нестандартным свойством -moz-background-size. Аналогично для Opera до версии 10.53 потребуется прописать -o-background-size.

Свойство background-origin

Свойство background-origin используется в сочетании с background-position для позиционирования фонового изображения. Применяется, если background-attachment задано как fixed. Его параметры можно отсчитывать от границ, отступов или содержимого элемента.

  • -origin: border-box; background — позиция рассчитывается от границы.
  • -origin: padding-box; background — позиция рассчитывается из поля заполнения.
  • -origin: content-box; background — позиция рассчитывается на основе содержимого элемента.

Варианты использования фонового изображения

Кроме очевидной декоративной пользы фона, его можно использовать и для других целей. Например, если в CSS добавить свойство float для смещения элементов, сложно гарантировать, что два или более столбца окажутся одинаковой ширины. Если они различны, то фон одного из столбцов будет оканчиваться раньше, чем фон другого. Избежать подобного эффекта можно, если использовать отдельный фон для каждого из столбцов. Но гораздо проще применить одно фоновое изображение к их родительскому элементу. Еще одно возможное применение — декорирование неупорядоченных списков. Буллиты в них могут выглядеть не слишком привлекательно, поэтому их лучше скрыть и заменить на фоновое изображение.

Шрифты вместо фона в HTML: background font


Выбор шрифтов для оформления сайтов в интернете очень ограничен. Можно сделать оригинальные шрифты, но они требуют от пользователя включения поддержки JavaScript. Более простое решение, работающее в любом браузере -создание изображения из текста и использование его в качестве фона для элемента. Если нужно, чтобы при этом текст оставался в разметке для поисковых систем и программ чтения с экрана, достаточно просто назначить класс для элемента, оставить текст в описании и добавить картинку через CSS. При этом браузеры будут показывать надпись, используя не пользовательский шрифт, а именно тот, что выбрал дизайнер.

Новое свойство — background-break

В CSS3 появилось нововведение: элементы могут быть разделены на отдельные блоки, строки и страницы. Свойство background-break определяет то, как фон отображается в разных окнах.

Возможные значения:

  • -break: continuous — значение по умолчанию. Обрабатывает блоки, как будто между ними нет пространства;
  • -break: bounding-box — учитывает пространство между блоками;
  • -break: each-box — обрабатывает каждый блок в элементе отдельно и повторно рисует фон индивидуально для каждого из них.

Существует еще множество свойств, помогающих настроить отображение фона, здесь описаны самые распространенные. Знания приходят с опытом, поэтому практика — лучший способ выучить CSS и HTML.

fb.ru

Добавление фонового изображения


Следующие правила добавляют цвет фона и фоновое изображение к элементу <body>. Затем мы задаем для элемента <div> (с классом wrapper) белый цвет фона:

  body {   background-color: #333;   background-image: url('image.png');  }  .wrapper {   width: 80%;   margin: 20px auto 40px auto;   background-color: #fff;   color: #333;  }

Попробовать »

Свойство background-color просто добавляет цвет фона на страницу или к определенному элементу. Мы использовали в примере background-color, чтобы установить фоновый цвет для элемента <body> и внутри элемента <div>. Если бы цвет фона для элемента <div> не был бы установлен, то в качестве фона был бы показан фон, который установлен для <body>, так как по умолчанию все элементы имеют прозрачный фон.

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

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

Повтор фонового изображения


По умолчанию фоновое изображение повторяется по вертикали и по горизонтали заполняя таким образом все доступное пространство в элементе. Повтор фонового изображения можно переопределить с помощью свойства background-repeat, рассмотрим его возможные значения:

  • no-repeat — фоновое изображение не повторяется
  • repeat-x — повторяет фоновое изображение только по горизонтали
  • repeat-y — повторяет фоновое изображение по вертикали
  • repeat — фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали (является значением по умолчанию)
<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Название документа</title>   <style>   body {   background-image: url('img_tree.png');   background-repeat: no-repeat;   padding-left: 200px; /*отступ от левого края равный ширине картинки*/   }   </style>   </head>     <body>     <h1>Украсим страничку фоновым изображением!</h1>   <p>При добавлении изображения к фону элемента, текст может наехать на него, что может    испортить впечатление от страницы. Для того, чтобы этого не случилось, для всех   	 элементов был добавлен отступ от левого края, равный ширине картинки.</p>     </body>  </html>

Попробовать »

Позиционирование фонового изображения


По умолчанию фоновое изображение располагается в верхнем левом углу окна браузера или элемента-контейнера. Если фоновое изображение не повторяется (background-repeat: no-repeat;) или должно повторяться с определенного места, то можно использовать свойство background-position, чтобы указать в каком месте окна браузера или элемента оно должно быть размещено. Это свойство обычно принимает два значения, разделяемые пробелом. Первое значение — положение по горизонтали, второе — по вертикали.

Свойство background-position может принимать в качестве значений ключевые слова: left, top, center, right и bottom. Вы можете использовать любую комбинацию ключевых слов:

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
body {   background-image: url('img_flwr.png');   background-repeat: no-repeat;   background-position: bottom right;   padding-right: 230px; /*отступ от правого края равный ширине картинки*/  }

Попробовать »

Если будет указано только одно значение, то по умолчанию вторым значением будет center:

background-position: right;

это то же самое что и:

background-position: right center;

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

Фиксация фонового изображения

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

Так как по умолчанию задний фон прокручивается вместе с содержимым, то в качестве примера мы зафиксируем наше фоновое изображение на одном месте с помощью значения fixed:

  body {   background-image: url('image.png');   background-repeat: no-repeat;   background-position: right top;   background-attachment: fixed;  }  

Попробовать »

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Название документа</title>   <style>   body {   background: white url('img_tree.png') no-repeat fixed right top;   padding-right: 200px;   }   </style>   </head>     <body>     <h1>Объединим свойства background в одно объявление!</h1>   <p>Объединение нескольких свойств в одно может значительно сократить ваш CSS-код,    при этом никаких изменений во внешнем виде страницы не произойдет. Свойства, которые    возможно объединять в одно объявление, вы можете посмотреть в нашем справочнике по CSS.  	</p>     </body>  </html>

Попробовать »

puzzleweb.ru

Background-color

Задает цвет фона. Можно применять к отдельным элементам <h1>, <p> или ко всему сайту через через тэг <body>:

Background-image

Используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:

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

Background-size

Определяет размер фонового изображения.

Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.

Background-repeat

Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

  • background-repeat: repeat-x — изображение повторяется только по горизонтали
  • background-repeat: repeat-y — изображение повторяется только по вертикали
  • background-repeat: repeat — изображение повторяется по горизонтали и вертикали
  • background-repeat: no-repeat — изображение не повторяется

background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

  • background-attachment: scroll — прокручивается вместе со страницей
  • background-attachment: fixed — при прокрутке фон остается неподвижным

Background-position

Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:

  • в фиксированных единицах (пикселы, сантиметры)
  • в процентах
  • словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).

Рассмотрим примеры:

  • background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
  • background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
  • background-position: right bottom — рисунок располагается снизу справа.

Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Например:

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!

design-mania.ru

background-color

Я более чем уверен — вы уже неоднократно делали назначение цвета фона. Сделать это можно используя несколько видов записи: обычную(используется название цвета), шестнадцатиричную или RGB-запись. Каждый тип равнозначен, используйте какой больше нравится. Я стараюсь использовать наиболее короткий вариант, и для восприятия попроще и файл стилей чуть поменьше получается размером.

    p {background-color: red;}  p {background-color: #f00;}  p {background-color: #ff0000;}  p {background-color: rgb(255, 0, 0;)}    

В CSS3 внедрена поддержка прозрачности, поэтому можно и ее добавить к нашему цвету, например так:

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

Последней цифрой установили прозрачность в 50%. Можно установить значение прозрачности от 0 (полностью прозрачный фон) до 1 (полностью непрозрачный).

background-image

Это свойство тоже используется очень часто, позволяет присваивать фону изображение. В CSS3 добавлена возможность присваивать фону несколько изображений, причем каждое создает своеобразный слой, поэтому каждое последующее накладывается на предыдущее. Зачем это может пригодиться? Все достаточно просто — допустим, нужно прикрутить рюшечки в каждом из углов сайта. При условии более-менее резиновой верстки использовать одно изображение — не вариант. Поэтому делаем 4 «слоя», каждое изображение двигаем в свой угол и на этом все, задача решена

    body {background-image: url("image1"), url("image2"), url("image3")}    

Если нужно назначить одно изображение на фон — в коде оставляем только первое, думаю, это понятно.
Используя любые изображения в качестве фона следует помнить два правила:

  • задайте контрастный цвет фона на тот случай, если у пользователя по каким-то причинам не отобразится картинка. Он может банально отключить отображение картинок, экономит трафик.
  • не используйте фоновое изображение для передачи какой-либо важной информации. По причине указанной выше, пользователь может и не увидеть.

Поддержка нескольких изображений для фона достаточно широка. Все браузеры, даже IE8, поддерживают это свойство.

background-repeat

C точки зрения технической оптимизации — очень полезное свойство . Позволяет размножить одну маленькую картинку на большую площадь. При этом, картинка должна быть бесшовной, чтобы не было видно границ. Может принимать 6 различных значений, 4 из которых я раньше использовал, а вот два последних стали для меня открытием.

Итак, подробнее:

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

Возьмем пример из предыдущего раздела, с несколькими изображениями и применим заполнение:

    body {  background-repeat: no-repeat, repeat-y, space;  }    

Первое не будет повторяться, второе будет, но только по вертикали и третье заполнит всю доступную область.

background-attachment

Свойство определяет, как будет вести себя фон при изменении области просмотра. Самый яркий пример — будет ли он сдвигаться при прокрутке? Честно говоря, считаю его бесполезным, не припомню, чтобы когда-либо применял подобный эффект, но некоторым нравится.

Может быть присвоено три значения:

  • fixed. Изображение не прокручивается
  • local. Изображение прокручивается с контентом, но не с элементом, его содержащим.
  • scroll. Изображение прокручивается с элементом, его содержащим.

background-position

А вот одно из самых важных свойств. Определяет, где конкретно будет расположен фон. По умолчанию, он располагается в верхнем левом углу окна браузера. Можно устанавливать положение по горизонтали, вертикали или по обеим сторонам. В случае горизонтали это центр, слева и справа (center, left,right), вертикаль это центр, сверху и снизу (center, top, bottom). Также прекрасно распознаются значения в процентах или пикселах, например так:

    body {  background-position: right 20px;  }    

Эта запись означает, что фон будет располагаться справа и на 20px смещен вниз. Когда используется два значения — первое обозначает горизонтальное расположение, а второе — вертикальное. Когда только одно значение — второе по умолчанию будет в центре.

При процентной записи — отсчет идет из верхнего левого угла. Например, такая запись:

    body {  background-position: bottom 10px right 20%;  }    

переместит фон на 10px от нижнего края и на 20% от правого.

background-clip

Свойство появилось с приходом CSS3, поддерживается хорошо. Все браузеры, кроме IE8 и ниже — замечательно с ним работают. Свойство определяет, как фоновая заливка или изображение должны отображаться под границами элемента. Эффект заметен только в случае полупрозрачных или пунктирных границ, показано на иллюстрации (взял на htmlbook.ru, очень уж удачная)

Body background
Итак, три типа значения, на картинке наглядно видна разница:

  • padding-box. Фон будет отображаться без учета границы
  • border-box. Фон на весь размер блока
  • content-box. Фон без учета границы и отступа.

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

background-origin

Свойство практически полностью аналогично предыдущему, с той разницей, что оно обозначает, как будет расположен фон. Значения аналогичны предыдущему. И небольшое уточнение — если свойство background-attachment имеет значение fixed — тогда это свойство работать не будет.

background-size

Хотя фон может быть любого размера, вы можете контролировать его размер на своей странице, как горизонтальный, так и вертикальный.

Значения могут быть как в процентной записи, так и в пикселах. Первое — горизонтальный размер, второе — вертикальный. Отрицательные значения не допускаются, имейте ввиду.

    body {  background-size: 500px 50%;  }    

Если указано только одно значение — второе считается по умолчанию (auto или 100%, если это возможно).

Также, можно указать еще два значения, которые будут регулировать размер фонового изображения:

  • contain. Масштабирует изображение, сохраняя пропорции, по длинной стороне, для максимального заполнения
  • cover. Тоже самое, но масштабирует по короткой стороне.

Сокращенная запись

Независимо от того, в каком порядке указаны свойства в краткой записи, работать они будут. Но это не валидно (код будет неправильным с точки зрения стандартов), W3C рекомендует применять такой порядок:

    body {  background-image: url("image.png");  background-position: top left;  background-size: 95% 95%;  background-repeat: no-repeat;  background-attachment: scroll;  background-origin: padding-box;  background-clip: content-box;  background-color: #333};  }    

Или краткий вариант записи:

    body {background: url("image.png") top left / 95% 95% no-repeat scroll padding-box content-box #333;}    

Они идентичны, но второй вариант занимает намного меньше места и грузится быстрее.

Вот и все, что я хотел рассказать про CSS background. При написании использовалась статья товарища Van SEO Design. Если остались вопросы — задавайте в комментариях, расскажу подробнее. Ну и не забывайте подписываться на обновления блога

Удачного дня

gering111.com

Фиксация фонового изображения

Если документ образует в окне браузера полосу прокрутки, то есть документ не влазит в окно полностью, то фоновое изображение прокручивается вместе с содержимым страницы. Вот пример:

<!DOCTYPE html> <html> <head> 	<title>Фоновые изображения в CSS</title> </head> <body style="background-image: url('/css/images/css.png')">  <p style="height:2500px">Пример текста.</p>  </body> </html>

Фоновое изображение можно зафиксировать. Для этого в CSS применяется свойство background-attachment. По умолчанию его значение равно scroll (прокрутка или подвижный фон).

То есть прошлый пример полностью аналогичен следующему:

<!DOCTYPE html> <html> <head> 	<title>Фоновые изображения в CSS</title> <style> 	body 	{ 		background-image: url('/css/images/css.png'); 		background-attachment: scroll; 	} </style> </head> <body>  <p style="height:2500px">Пример текста.</p>  </body> </html>

Чтобы зафиксировать фоновое изображение свойству background-attachment нужно назначить значение fixed. Исправим предыдущий пример и посмотрим как он будет работать:

<!DOCTYPE html> <html> <head> 	<title>Фиксация фонового изображения в CSS</title> <style> 	body 	{ 		background-image: url('/css/images/css.png'); 		background-attachment: fixed; 	} </style> </head> <body>  <p style="height:2500px">Пример текста.</p>  </body> </html> 

Значения scroll и fixed для свойства background-attachment были в версии CSS2.1. В спецификации CSS3 появилось дополнительное значение для этого свойтва — local.

При использовании свойтва local, а применять его имеет смысл к блокам в документе, фоновое изображение блока будет прокручиваться, если блок имеет полосу прокрутки и пользователь прокручивает её. Тогда содержимое блока и фоновое изображение прокручиваются в блоке. При прокрутке страницы, а не блока, фоновое изображение блока прокручивается вместе с внеблоковым содержимым документа. Это проще один раз увидеть, чтобы понять. Вот пример:

<!DOCTYPE html> <html> <head> 	<title>Фоновые изображения в CSS</title> <style> 	body 	{	/* создаём правило для тега body - тут укажем фоновый рисунок для всего документа */ 		background-image: url('/css/images/bkg.gif'); 	} 	div 	{ 		width: 400px; 		height: 300px; 		background-image: url('/css/images/css.png'); 		overflow: auto; /* при выхождении содержимого за границу блока появляется полоса прокрутки */ 	} </style> </head> <body>  <p>Первый блок со своим фоновым изображением.</p>  <div style="background-attachment: scroll;">Эта область - тег div. Фоновое изображение задано в стиле, прописанном в разделе head. Ширина блока равна 400 пикселям, фоновое изображение блока прокручивается вместе с телом документа. <p style="height:2500px">Пример текста.</p></div>  <p>Второй блок со своим фоновым изображением.</p>  <div style="background-attachment: fixed;">Эта область - тег div. Фоновое изображение задано в стиле, прописанном в разделе head. Ширина блока равна 400 пикселям, фоновое изображение остаётся на месте при прокрутке документа. <p style="height:2500px">Пример текста.</p></div>  <p>Третий блок со своим фоновым изображением.</p>  <div style="background-attachment: local;">Эта область - тег div. Фоновое изображение задано в стиле, прописанном в разделе head. Ширина блока равна 400 пикселям, фоновое изображение блока прокручивается вместе с телом документа. Но также при прокрутке блока прокручивается вместе с другим содержимым блока. <p style="height:2500px">Пример текста.</p></div>  <p style="height:2500px">Пример текста.</p>  </body> </html>

На этом тема фиксации фоновых изображений в рамках этой статьи закрыта.

Повторение фонового изображения

Выше в статье писалось, фоновый рисунок повторяется «плиткой», если не занимает всей площади блока. Управлять вариантами повторений фонового изображения можно при помощи свойства background-repeat. Возможные значения этого свойства:

  • repeat — фоновый рисунок повторяется «плиткой» (значение по умолчанию).
  • no-repeat — фоновый рисунок не повторяется, показывается только один раз.
  • repeat-x — повторять изображение только по горизонтали.
  • repeat-y — повторять изображение только по вертикали.
<!DOCTYPE html> <html>  <head> 	<title>Повторение фонового изображения в CSS</title> <style> 	body 	{ 		background-image: url('/css/images/css.png'); 		background-repeat: no-repeat; 	} </style> </head> <body>  <p style="height:2500px">Пример текста.</p>  </body> </html>

Теперь тот же самый пример, только повторим изображение по вертикали.

<!DOCTYPE html> <html>  <head> 	<title>Повторение фонового изображения в CSS</title> <style> 	body 	{ 		background-image: url('/css/images/css.png'); 		background-repeat: repeat-y; 	} </style> </head> <body>  <p style="height:2500px">Пример текста.</p>  </body> </html>

Позиционирование фонового изображения

Изменить начально положение фонового изображения, заданного свойством background-image, можно при помощи свойства background-position. Если быть точным, задаётся позиция верхнего левого угла изображения.

Для позиционирования можно использовать следующие ключевые слова:

Позиционирование по горизонтали:

  • left — расположить слева.
  • center — расположить по центру.
  • right — расположить справа.

Позиционирование по вертикали:

  • top — расположить сверху.
  • center — расположить по центру.
  • bottom — расположить снизу.
<!DOCTYPE html> <html>  <head> 	<title>Позиционирование фонового изображения в CSS</title> <style> 	body 	{ 		background-image: url('/css/images/css.png'); 		background-repeat: no-repeat; 		background-position: right top; 	} </style> </head> <body>  <p>Позиционирование фонового изображения в правом верхнем углу.</p>  </body> </html>

Кроме ключевых слов можно использовать единицы измерения CSS такие как пикселы, проценты и прочие.

<!DOCTYPE html> <html>  <head> 	<title>Позиционирование фонового изображения в CSS</title> <style> 	body 	{ 		background-image: url('/css/images/css.png'); 		background-repeat: no-repeat; 		background-position: center 150px; 	} </style> </head> <body>  <p>Позиционирование фонового изображения по центру с отступом от верхней границы в 150 пикселей.</p>  </body> </html>

Свойство background

Свойство background является базовым и используя его можно задать значение всех дочерних свойств, описаных выше.

  • background-color — работа с этим свойством подробно описана в статье «Цвета в CSS»
  • background-attachment
  • background-image
  • background-position
  • background-repeat

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

<!DOCTYPE html> <html>  <head> 	<title>Позиционирование фонового изображения в CSS</title> <style> 	body 	{ 		background: url('/css/images/css.png') no-repeat center 150px; 	} </style> </head> <body>  <p>Позиционирование фонового изображения по центру с отступом от верхней границы в 150 пикселей.</p> <p style="background: blue">Этот абзац с синим фоновым цветом заданным в свойстве background, аналогичная запись для стиля: background-color: blue.</p>  </body> </html>

Полезные советы

  • При использовании фоновых рисунков также заливайте фон цветом при помощи свойства background-color, если рисунок недоступен, или показ картинок отключён пользователем в настройках браузера, то фоновый цвет честично компенсирует это.
  • Не используйте слишком тяжёлые изображения. Экономьте время и нервы посетителей.

komotoz.ru

Цвет переднего плана : свойство ‘color’

Свойство color описывает цвет переднего плана элемента.

Например, представьте, что мы хотим сделать все заголовки документа тёмно-красными. Все заголовки обозначаются HTML-элементом <h1>. В нижеприведённом коде цвет элемента <h1> устанавливается красным.

  • Показать пример

Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия цветов («red») или rgb-значения (rgb(255,0,0)).

Свойство ‘background-color’

Свойство background-color описывает цвет фона элемента.

В элементе <body> размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу <body>.

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

  • Показать пример

Заметьте, что устанавливает два свойства для <h1>, разделяя их точкой с запятой.

Фоновые изображения [background-image]

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

Ниже мы используем в качестве фонового изображение бабочки. Вы можете загрузить это изображение и использовать его на вашем компьютере (щёлкните правой клавишей мыши на изображении и выберите «сохранить изображение как/save image as»), либо вы можете использовать другое изображение.

Butterfly

Для вставки рисунка бабочки в качестве фонового изображения web-страницы просто примените свойство background-image в тэге <body> и укажите местоположение рисунка.

  • Показать пример

NB: Обратите внимание, что мы специфицируем место, где находится файл как url(«butterfly.gif»). Это означает, что он находится в той же папке, что и таблица стилей. Вы, разумеется, можете ссылаться и на файлы изображений в других папках, используя, например, url(«../images/butterfly.gif»), или даже на файлы в Internet, указывая полный адрес файла : url(«http://www.html.net/butterfly.gif»).

Повторение/мультипликация фонового изображения [background-repeat]

Вы заметили в предыдущем примере, что изображение бабочки повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat управляет этим.

В таблице указаны четыре значения background-repeat.

Значение Описание Пример
Background-repeat: repeat-x Рисунок повторяется по горизонтали Показать пример
background-repeat: repeat-y Рисунок повторяется по вертикали Показать пример
background-repeat: repeat Рисунок повторяется по горизонтали и вертикали Показать пример
background-repeat: no-repeat Рисунок не повторяется Показать пример

Например, для отмены повторения/мультипликации фонового рисунка мы должны записать такой код:

  • Показать пример

Блокировка фонового изображения [background-attachment]

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

В таблице указаны два значения background-attachment. Щёлкните на примере, чтобы почувствовать разницу между scroll и fixed.

Значение Описание Пример
Background-attachment: scroll Изображение прокручивается вместе со страницей — разблокировано Показать пример
Background-attachment: fixed Изображение блокировано Показать пример

Например, следующий код фиксирует изображение.

  • Показать пример

Расположение фонового рисунка [background-position]

По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана.

Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение ‘100px 200px’ располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.

Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель ниже иллюстрирует сказанное:

Body background

В таблице дано несколько примеров.

Значение Описание Пример
background-position: 2cm 2cm Рисунок расположен на 2 cm слева и на 2 cm сверху Показать пример
background-position: 50% 25% Рисунок расположен по центру и на четверть экрана сверху Показать пример
background-position: top right Рисунок расположен в правом верхнем углу страницы Показать пример

В примере кода фоновое изображение располагается в правом нижнем углу экрана:

  • Показать пример

Сокращённая запись [background]

Свойство background входит в состав всех свойств, перечисленных в этом уроке.

С помощью background вы можете сжимать несколько свойств и записывать ваши стили в сокращённом виде, что облегчает чтение таблиц.

Например, посмотрите на эти строки:

Используя background, того же результата можно достичь одной строкой кода:

Порядок свойств этого элемента таков:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment и background-position нет в данном примере:

то этим двум неспецифицированным свойствам будут присвоены значения по умолчанию — scroll и top left.

Резюме

В этом уроке вы уже познакомились с техникой, отсутствующей в HTML. Ещё интереснее будет в следующем уроке, где мы рассмотрим широкие возможности CSS при описании шрифтов.


ru.html.net

Работа с фоном в CSS

С помощью свойства background можно задать положение, цвет, изображение, повторяемость и привязку фона, как для отдельных элементов, так и полностью для всего сайта, что по своей сути, кстати, является заданием определённых настроек для тега <body>. Рассмотрим все свойства, которые связаны с заданием фона.

background-color

Задаёт цвет фона. Его можно применять как к отдельным элементам <h1>, <p>, так и ко всему веб-сайту с помощью тега <body>.

Например:

background-image

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

Например:

Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.

background-repeat

Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.

Оно может иметь несколько значений:

  • background-repeat: repeat-x — повторение по горизонтали;
  • background-repeat: repeat-y — повторение по вертикали;
  • background-repeat: repeat — повторение и по горизонтали и по вертикали;
  • background-repeat: no-repeat — изображение не повторяется.

Например, повторение по горизонтали выглядит так:

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

  • background-attachment: scroll — фон прокручивается вместе со страницей;
  • background-attachment: fixed — фон остаётся неподвижным.

background-position

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

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left.

Например:

  • background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
  • background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

gradient

Плавный переход от одного цвета к другому, причем переходов допускается несколько.

Использование градиента можно наглядно продемонстрировать в примере кода:

Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

Например:

Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.

Работа с размером фона в CSS

В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

Существует несколько способов, позволяющих определить размер:

Абсолютное изменение размера

Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.

Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.

Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

Относительное изменение размера

Если применять проценты, размер будет основываться не на изображении, а на элементе.

Например:

То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.

Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.

Масштабирование до максимального размера

В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.

Такой фон страницы будет автоматически подгоняться под любое разрешение:

Заполнение фоном

Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

В том случае, если соотношения сторон различаются, картинка обрежется:

Масштабирование сразу нескольких фонов

Они могут быть масштабированы при помощи списка значений, которые разделены запятыми в том же порядке:

Создание полупрозрачного фона в CSS

Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

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

Пример создания полупрозрачного блока:

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

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Пример задания прозрачного фона:

Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

www.internet-technologies.ru

14.1 Цвета переднего плана: свойство ‘color’

Это свойство описывает цвет переднего плана текстового содержимого элемента. Например, существует несколько способов задания красного цвета:

14.2 Фон

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

Свойства фона не наследуются, но фон родительского блока всегда будет виден, т.к. по умолчанию в качестве начального значения свойства ‘background-color’ выступает значение ‘transparent’.

Фон блока, порождаемого корневым элементом, покрывает всю область представления.

Разработчикам HTML-документов рекомендуется задавать фон для элемента BODY, а не для элемента HTML. Агенты пользователей при оформлении фона должны придерживаться следующей иерархии приоритетов: если значение свойства ‘background’ элемента HTML отлично от ‘transparent’, то следует использовать его. В противном случае следует использовать значение свойства ‘background’ элемента BODY. Если в результате получится значение ‘transparent’, то отображаемый фон окажется неопределенным.

14.2.1 Свойства фона: ‘background-color’, ‘background-image’, ‘background-repeat’, ‘background-attachment’, ‘background-position’ и ‘background’

Это свойство устанавливает цвет фона элемента равным <цвет> или ключевому слову ‘transparent’, благодаря которому все цвета, лежащие под элементом, становятся видными.

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

В качестве значения этого свойства может выступать <uri> графического объекта либо значение ‘none’, если изображение не используется.

Если задано фоновое изображение, то данное свойство определяет, будет ли оно дублироваться (в виде мозаики) и каким образом это будет осуществляться. Мозаика покрывает области, отведенные в блоке для содержимого и отступов. Значения данного свойства имеют следующий смысл:

repeat

Изображение дублируется в вертикальной и горизонтальной плоскостях.

repeat-x

Изображение дублируется только в горизонтальной плоскости.

repeat-y

Изображение дублируется только в вертикальной плоскости.

no-repeat

Изображение не дублируется: отображается только одна копия изображения.

Если задано фоновое изображение, то данное свойство определяет, будет ли оно фиксироваться относительно окна просмотра (значение ‘fixed’) или будет перемещаться вместе с документом (значение ‘scroll’) в процессе его прокрутки.

Даже в случае фиксации изображения оно остается видимым только тогда, когда находится в области, предназначенной для оформления фона или отступов элемента. Поэтому изображение может оставаться невидимым до тех пор, пока его копии не будут расположены мозаикой (‘background-repeat: repeat’).

Агенты пользователей могут интерпретировать значение ‘fixed’ как ‘scroll’. Однако рекомендуется, чтобы значение ‘fixed’ все же интерпретировалось корректно, по крайней мере, для элементов HTML и BODY, т.к. у авторов не существует возможности предоставления изображения только для тех браузеров, которые поддерживают значение ‘fixed’. Дополнительную информацию можно получить в разделе, посвященном конформности.

Если задано фоновое изображение, то данное свойство определяет его начальное положение. Значения имеют следующий смысл:

<проценты> <проценты>

Если используется пара значений ‘0% 0%’, то верхний левый угол изображения выравнивается относительно верхнего левого угла краевой линии отступов блока. Если задана пара значений ‘100% 100%’, то нижний правый угол изображения помещается в нижний правый угол краевой линии отступов. Если задана пара значений ‘14% 84%’, то точка, смещенная вдоль изображения на 14% вправо по горизонтали и на 84% вниз по вертикали помещается в точку, смещенную вдоль области, предназначенной для отступов, на 14% вправо по горизонтали и на 84% вниз по вертикали.

<длина> <длина>

Если задана пара ‘2cm 2cm’, то верхний левый угол изображения помещается на 2 см правее и 2 см ниже верхнего левого угла области, предназначенной для отступов.

top left и left top

Аналогично значению ‘0% 0%’.

top, top center и center top

Аналогично значению ‘50% 0%’.

right top и top right

Аналогично значению ‘100% 0%’.

left, left center и center left

Аналогично значению ‘0% 50%’.

center и center center

Аналогично значению ‘50% 50%’.

right, right center и center right

Аналогично значению ‘100% 50%’.

bottom left и left bottom

Аналогично значению ‘0% 100%’.

bottom, bottom center и center bottom

Аналогично значению ‘50% 100%’.

bottom right и right bottom

Аналогично значению ‘100% 100%’.

Если задано только одно значение длины или одно процентное соотношение, то оно определяет позицию только по горизонтали, а позиция по вертикали определяется, исходя из значения 50%. Если задано два значения, то первой указывается позиция по горизонтали. Допускается сочетание значений длины и процентных соотношений (например, ‘50% 2cm’). Также допускается использование отрицательных значений. Ключевые слова не могут использоваться вместе со значениями длины или процентными соотношениями (все возможные варианты представлены выше).

Если фоновое изображение фиксировано в окне просмотра (см. свойство ‘background-attachment’), то оно размещается относительно окна просмотра, а не относительно области элемента, предназначенной для отступов. Например,

Свойство ‘background’ является свойством стенографического типа, используемым для определения отдельных свойств фона (‘background-color’, ‘background-image’, ‘background-repeat’, ‘background-attachment’ и ‘background-position’) одновременно.

Сначала свойство ‘background’ устанавливает всем отдельным свойствам фона их начальные значения, а затем явно назначает им те значения, которые были заданы в объявлении.

14.3 Гамма-коррекция

Информацию о цветовой гамме можно найти в учебнике под названием «Gamma Tutorial» в спецификации PNG ([PNG10]).

При вычислении гамма-коррекции агенты пользователей, осуществляющие отображение на дисплеях с ЭЛТ, могут предполагать идеальность используемой ЭЛТ и игнорировать все эффекты, имеющие место в текущей цветовой гамме из-за внесенных в нее возмущений. Поэтому на имеющихся в данный момент платформах минимум, что им следует сделать:

ПК с системой MS-Windows

ничего не требуется

Unix с использованием X11

ничего не требуется

Mac с использованием QuickDraw

применить цветовую гамму 1.45 [ICC32] (приложения, осуществляющие автономную синхронизацию цветов, могут просто передать профиль sRGB ICC в модуль синхронизации цветов для выполнения корректной настройки цветовой гаммы)

SGI с использованием X

применить цветовую гамму из /etc/config/system.glGammaVal (по умолчанию используется значение 1.70; приложения, работающие на Irix версии 6.2 и выше, могут просто передать профиль sRGB ICC в систему управления цветовой гаммой)

NeXT с NeXTStep

применить цветовую гамму 2.22

Фраза «применить цветовую гамму» означает, что каждой из трех составляющих R, G и B перед тем, как она будет передана операционной системе, должно быть присвоено значение R’=Rgamma, G’=Ggamma, B’=Bgamma.

Это можно быстро сделать, осуществив однократное построение 256-элементной таблицы поиска в момент инициализации браузера:

  for i := 0 to 255 do   raw := i / 255.0;   corr := pow (raw, gamma);   table[i] := trunc (0.5 + corr * 255.0)  end  

Это позволит сократить количество абстрактных математических расчетов, приходящихся на один атрибут цвета, и еще больше сократить их при вычислении одного пиксела.

itforweb.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.