Как зафиксировать фон в html

CSS уроки, 5 часть: фон, позиция

CSS фон (background)

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

Цвет фона

Цвет фона задается свойством background-color и значениями:

Например, мы могли бы установить заголовок h1 с цветом фона бирюзового, следующим образом:

Фоновое изображение

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

Помните, что в Интернете используются три типа изображений: GIF, PNG, JPEG. Кроме того, будьте осторожны с фоновым изображением, чтобы не подавлять текст — слишком яркие цвета могут помешать чтению.

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

Большое фоновое изображение, покрывающее всю страницу, используется редко — это сделало бы страницу слишком тяжелой. В результате, мало кто будет ждать загрузки нескольких мегабайт, и вместо преимущества, фоновое изображение будет недостатком. Вместо целых картинок часто используется горизонтальное и / или вертикальное повторение меньших изображений. Для этого используйте свойство background-repeat и любое из следующих значений:

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

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

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

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

Укороченная запись свойств фонового изображения

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

CSS позиция

То, как будет выглядеть веб-сайт, во многом определяется расположением его отдельных элементов. У CSS есть несколько опций для контроля положения элементов. Хорошее знание этих CSS-команд позволяет вам создавать веб-страницы вашего сайта именно так, как вы хотите, чтобы они выглядели.

Обтекание (float)

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

В то же время, текст будет перемещен так, чтобы изображение было плотно обернуто.

Значения, которые можно использовать с плавающей точкой:

Свойство float также часто используется для формирования столбцов на странице. Для этой цели содержимое каждого столбца в HTML заключается в теги

Очистка (clear)

Используя float, автоматически устанавливается эффект переноса — текст повторяет форму обтекаемого элемента. Если такое поведение текста нежелательно, вы можете использовать свойство clear для позиционирования других элементов, независимо от обтекаемого объекта. Clear используется со следующими значениями:

Display — блок, строка, список, скрытие

В соответствии с тем, как отображается страница, элементы можно разделить на блоки и строки. Блочные элементы (заголовки h1

h6, абзацы, div) занимают всю ширину экрана и всегда имеют символ конца строки, автоматически включаемый до и после них.

Элементы строк (например, span, em, a), в свою очередь, занимают только необходимое им пространство и не содержат обязательного символа конца строки.

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

Позиция — Position

То, какой должна быть позиция элемента на странице, задает свойство position и одно из значений:

Слева, справа, сверху, снизу (left, right, top, bottom)

Эти свойства используются вместе с position, чтобы определить позицию, на которой должен быть размещен данный элемент. Для значений left, right, top и bottom можно использовать числа с единицами измерения (px, em и т. д.), проценты или ключевое слово auto.

Переполнение — Overflow

Иногда элементы могут быть больше, чем их указанная ширина или высота. Что делать с частью элемента, выходящей за пределы указанных размеров, контролируется свойством overflow. Кроме того, overflow часто используется для добавления ползунка к элементу.

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

Элемент наложения — z-index

Используя соответствующие значения положения, вы можете накладывать элементы друг на друга. В этом случае, чем позже элемент описан в HTML-коде, тем дальше будет позиция.

Вы можете изменить наложение с помощью свойства z-index. Для значений z-index используются целые числа — чем больше номер z-index для элемента, тем выше будет его позиция. Z-индекс также может быть описан ключевым словом auto. В этом случае, положение элемента будет определяться как обычно — в порядке, в котором элемент упоминается в коде HTML.

Источник

Фон в CSS. Параметры background (color, image, position, repeat, attachment) для задания цвета фона или фоновой картинки html элементов

Здравствуйте, уважаемые читатели блога webcodius.ru. В этой статье продолжим рассматривать свойства CSS. На этот раз займемся настройками фона как для всей web-страницы, так и для отдельных элементов. Для этого используются пять CSS правил: background-position, background-image, background-repeat, background-color, background-attachment, — либо одно составное правило background. С помощью хорошо подобранного фона можно выделить важные элементы и оживить html страницу.

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

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

Далее рассмотрим подробнее каждое свойство.

Background-color и background-image

Background-color и background-image два свойства, которые влияют непосредственно на то каким будет фон элемента html страницы, либо фон всей страницы.

Свойство стиля background-color служит для задания цвета фона и имеет следующий синтаксис:

background-color: transparent| |inherit

Значение transparent делает фон прозрачным. Вообще по умолчанию цвет фона в любом элементе веб страницы прозрачный. Цвет можно задать в виде RGB-кода или имени. RGB-код задается в виде шести или трех цифр шестнадцатеричного кода. Значение inherit означает, что элемент наследует настройки фона от родительского элемента.

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

У этого абзаца черный фон и белый текст

Либо так в коде CSS файла:

p <
background-color:#000000;
color:#ffffff
>

У этого абзаца черный фон и белый текст

Остальные четыре параметра касаются только фонового изображения, которое можно задать для любого элемента web-страницы. Какой графический файл использовать в качестве фоновой картинки задает свойство стиля background-image:

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

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

А вот оригинальный вид фонового изображения:

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

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

Background-repeat — параметры повторения фонового изображения

Свойство background-repeat может принимать следующие значения:

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

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

В результате фоновая картинка отобразиться только в левом верхнем углу абзаца:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

repeat — фоновое изображение будет повторяться и по горизонтали и по вертикали. Это значение по умолчанию.

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-x. Поэтому фоновая картинка заполнила только верхнюю часть абзаца.

repeat-y — фоновое изображение будет повторяться только по вертикали. Пример:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-y. Поэтому фоновая картинка заполнила только левую часть абзаца.

Позиционирование фона с помощью background-position

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

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

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

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

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

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

Например, для смещения фонового изображения для этого абзаца на 250 пикселей по горизонтали и на 10 пикселей по вертикали я использовал следующие CSS правила:

background-image:url (//webcodius.ru/example/logo.png);
background-repeat:no-repeat;
background-position:250px 10px;

Если для свойства background-position указана только одна позиция, то вторая будет будет приниматься равной center в случае использования ключевых слов и 50% в случае использования числовых значений.

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

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

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

Фиксация фона background-attachment

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

scroll — значение по умолчанию, которое заставляет браузер прокручивать фон вместе с содержимым страницы. Значение fixed фиксирует фон на месте, и он не будет прокручиваться.

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

Сборное правило background

Все пять рассмотренных выше правил могут быть объединены в одно сборное правило background. Значения этих пяти правил могут использоваться в любом порядке, так как они уникальны, и разделяются пробелами. А все, что вы не укажите браузер возьмет значения по умолчанию.

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

background: url (//webcodius.ru/example/logo.png) 50% no-repeat;

А, например, для задания заливки цветом можно использовать одно из двух возможных CSS правил:

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

Источник

2.10. CSS-фон

Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.

Фон не отображается у пустых элементов с нулевой высотой. Отрицательные значения свойства margin не влияют на фон элемента.

Свойства фона html-элементов

1. Базовый цвет: свойство background-color

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

Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.

Свойство не наследуется.

Рис. 1. Свойство background-color для разных элементов

2. Источник изображения: свойство background-image

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

Свойство не наследуется.

3. Укладка изображений: свойство background-repeat

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

Свойство не наследуется.

Рис. 2. Свойство background-repeat

4. Фиксация изображения: свойство background-attachment

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

Свойство не наследуется.

5. Позиционирование изображений: свойство background-position

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

Свойство не наследуется.

Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.

Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.

Рис. 3. Свойство background-position

Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:

Рис. 4. Фоновое изображение по низу блока

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

Рис. 5. Задание для блока нескольких фоновых изображений

6. Область рисования: свойство background-clip

Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.

Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.

Свойство не наследуется.

Рис. 6. Свойство background-clip

7. Область расположения фона: свойство background-origin

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

Свойство не наследуется.

Рис. 7. Свойство background-origin

8. Размер изображений: свойство background-size

Свойство background-size устанавливает размер фоновых изображений.

Свойство не наследуется.

Рис. 8. Свойство background-size

9. Краткая запись свойств фона: свойство background

10. Множественные фоны

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

Рис. 9. Пример использования нескольких фоновых изображений

Источник

Урок 11. Фон сайта с помощью CSS. Свойство background

Чтобы придать любой html-странице свой стиль и индивидуальность, активно используют фоны для элементов и страницы в целом. За этот момент оформления отвечает целый раздел css-свойства, которые начинаются со слова background.

Как задать цвет и изображение фона сайта

Для задания цвета фона используют свойство background-color, оно принимает значения в шестнадцатеричном формате цвета, в формате RGB, задание цвета при помощи ключевых слов.

Чтобы использовать в качестве фона сайта изображения, применяют свойство background-image, где указывают ссылку на файл. Можно использовать одновременно и вариант с цветом фона, и с изображением. Тогда изображение накладывается поверх фона определенного цвета.

Теперь поговорим о том, как регулировать повторение фонового изображения, как растянуть его на весь экран и т.д. Свойство, которое отвечает за повтор фона, называется background-repeat. Оно принимает четыре значения. В качестве значения по умолчанию принимается repeat (повторять по вертикали и горизонтали). Три других значения:

Для задания размера фонового изображения сайта используют свойство background-size, оно принимает значения в процентах, пикселях и слово auto. Имеет два значения через пробел. Первое значение отвечает за растяжение по горизонтали, второе по вертикали. Если первое значение задано (например, 100%), а второе значение выставлено auto, то фон по горизонтали растянется на весь размер блока, а по вертикали подгоняет высоту для данной ширины. Есть еще два значения для этого свойства (cover и contain). Cover изменяет размеры изображения так, чтобы блок был полностью закрыт картинкой, а contain так, чтобы картинка поместилась в блок целиком. Cover и contain задаются по одному, через пробел уже ничего писать не нужно.

Пример. Зададим цвет фона, его изображение без повтора и растянем его по ширине и высоте:

Положение фонового изображения, background-position

Немного подробнее остановимся на работе с фоновым изображением, которое не нужно повторять. Для регулирования нахождения этого изображения внутри блока, которому мы задаем фон, используется CSS-свойство background-position. Это свойство принимает два значения через пробел. Первое определяет положение по оси x (горизонтали), второе по оси y (вертикали).

Фиксим фонового изображения, background-attachment

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

CSS-свойство background

Чтобы обобщить все вышеперечисленные громоздкие конструкции в CSS есть свойства для их объединения, background. Оно имеет следующую структуру background: background-color background-image background-repeat background-position background-attachement; Все значения этих свойств перечисляются через пробел. Если заданы не все свойства, то они имеют значения по умолчанию. Например:

Источник