background в CSS


Содержание

CSS: Фон

CSS свойства background используются для создания эффектов на заднем фоне страницы.

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

  • background-color
  • background-image
  • background-repeat
  • background-position

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

Следующие правила добавляют цвет фона и фоновое изображение к элементу . Затем мы задаем для элемента

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

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

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

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

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

  • no-repeat — фоновое изображение не повторяется
  • repeat-x — повторяет фоновое изображение только по горизонтали
  • repeat-y — повторяет фоновое изображение по вертикали
  • repeat — фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали (является значением по умолчанию)

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

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

По умолчанию фоновое изображение располагается в верхнем левом углу окна браузера или элемента-контейнера. Если фоновое изображение не повторяется (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

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

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

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

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

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

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

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

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

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

Несколько фоновых изображений

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

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

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

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

Свойство background: все настройки фона в одном месте

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

Порядок записи значений background

Свойство background объединяет все свойства для фона. Вы можете перечислить в нем значения для:

  • background-image
  • background-position
  • background-size (CSS3)
  • background-repeat
  • background-attachment
  • background-origin (CSS3)
  • background-clip (CSS3)
  • background-color

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


Как видно на рисунке, мы пишем значения всех свойств через пробел как обычно. Исключением являются свойства background-position и background-size — их необходимо разделять знаком слэша / .

Ни одно значение не является обязательным: вы можете не указывать значений тех свойств, которые хотите оставить по умолчанию. К слову, настройки background по умолчанию следующие:

Для примера запишем стиль через свойство background , определив только цвет фона ( background-color ) и порядок его обрезки ( background-clip ):

Этот код эквивалентен такому коду:

Здесь мы отметили те свойства, которые не изменились при написании сокращенной записи. И, наверное, вы уже видите, что свойство background-origin приняло такое же значение, как и background-clip , хотя мы вроде как не собирались его менять. Дело в том, что для background-origin и background-clip используются одинаковые ключевые слова — content-box , padding-box , border-box . И если указать только одно из этих ключевых слов в свойстве background , то оно будет применено сразу к двум свойствам. Если же вам понадобится указать разные значения для background-origin и background-clip , запишите их рядом через пробел, как показано на схеме выше (здесь важна последовательность — сначала идет значение background-origin , затем — background-clip ).

Влияние каскадности на свойства

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

Допустим, мы написали следующий код:

Мы ожидаем увидеть изображение кота на синем фоне, но не тут-то было. Оказывается, второе свойство background перезаписало первое значение background-color на значение по умолчанию (т. е. на transparent ). Решить проблему можно, поменяв местами строки:

А теперь мини-задача: если в последней строке этого кода заменить свойство background-color: blue на упрощенное свойство background: blue , как вы думаете, что произойдет с фоновым рисунком и значением no-repeat ?

Рекомендации по использованию сокращенного свойства

Безусловно, использование «мульти»-свойства background может сэкономить место в таблице стилей и сберечь ваше время, но оно также может и повлечь за собой неприятности, часть из которых мы только что рассмотрели. Поэтому используйте данное свойство с умом. Если вам требуется добавить только цвет фона, лучше используйте для этого отдельное свойство background-color . То же самое касается и всего остального.

Кроме того, если вам потребуется писать стили с учетом поддержки браузера Internet Explorer 8 (или более ранних версий), а в свойстве background у вас будут содержаться значения для свойств CSS3, то браузер не сможет считать их и полностью проигнорирует свойство background . Поэтому свойства из CSS3 рекомендуется записывать по отдельности.

Далее в учебнике: устанавливаем несколько фоновых рисунков для элемента.

background

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit + + + +

Пример

Как задать все свойства фона в одной строке:

Описание и использование

Свойство background объединяет в себе все свойства, которые используются для определения фона страницы.

Свойства, которые можно задать (по порядку): background-color, background-image, background-repeat, background-attachment, и background-position.

Любое из свойств может отсутствовать, если это необходимо. Кроме этого, порядок свойств может быть изменен. Браузер сам определит, какое из них соответствует нужному атрибуту.

CSS-фон

Фон на веб-странице — это очень важно, поэтому для него предусмотрено немало свойств. Все они начинаются словом «Background». В переводе с английского «Background» и означает «Фон». О правилах оформления фона через CSS и пойдёт речь в статье.

background-color

Мы уже говорили о свойстве color, которое позволяет задать цвет переднего плана элемента, то есть букв текста. background-color устанавливает задний фон любого HTML-элемента: таблицы, абзаца, списка и т. д.

Например, цвет фона всей страницы можно настроить так:

background-image

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

Например, картинка background.png хранится в той же папке, что и веб-страница, и вы хотите установить её как фон параграфам этого HTML-документа. Код будет таким:

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

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

background-repeat

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

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

  • repeat. Задано по умолчанию. Результат вы видели на рисунке выше.
  • repeat-x. Картинка будет повторяться только слева направо, по горизонтали. По вертикали не будет, так что заполнит только первый слой.

  • repeat-y. Рисунок будет повторяться по вертикали, но не по горизонтали, то есть идти вдоль левой границы страницы.
  • no-repeat. Фон не будет повторяться вообще.
Илон Маск рекомендует:  Многоколоночный макет

background-position

Позволяет задать позицию фоновому изображению, ведь не всегда нужно, чтобы оно отображалось с левого верхнего угла окна браузера. Для позиционирования достаточно указать два значения через пробел: координату по оси X (горизонтальное позиционирование) и координату по оси Y (позиционирование вертикальное). Задавать их можно в любых единицах длины, но для абсолютных значений рекомендуется использовать пиксели (px), а для относительных — проценты (%).

Также картинку можно позиционировать зарезервированными словами.

  • Для горизонтального расположения используются слова left, center и right (по левому краю, по центру и по правому краю соответственно).
  • По вертикали положение задают значения top, center и bottom — позиционирование сверху, по центру и снизу.

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

background-attachment

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

  • fixed — фон зафиксирован.
  • scroll — фон разблокирован (прокручивается)
  • local — рисунок прокручивается только с содержимым элемента, но дальше, если элемент уже закончился, не идёт.

Если изображений несколько, для них можно указать правила, перечислив их в одном свойстве background-attachment через запятую:

background-clip

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

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

background-origin

То же, что и background-clip, с такими же значениями, только задаёт положение относительно границ не текущего элемента, а элемента-родителя.

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

background-size

Свойство указывает браузеру размеры фонового изображения. Вы можете задать их в любых единицах длины (через пробел указывается сначала ширина, потом высота картинки). Если прописано только одно значение, то оно определит ширину, высота при этом останется исходной, то есть такой, как в файле изображения. Чтобы указать только высоту, а ширину оставить оригинальной, свойству background-size нужно задать значения auto размер (например, background-size: auto 300px).

В правиле можно использовать ещё два значения.

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

background

Позволяет объединить значения перечисленных свойств в одной строке:

В примере между свойствами background-position и background-size стоит слеш (/), которым их значения друг от друга необходимо отделять, дабы не запутывать браузер.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

CSS Background. Полное руководство

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

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

background-color

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


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

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

background-image

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

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

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

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

background-repeat

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

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

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

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

background-attachment

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

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

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

background-position

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

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

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

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

background-clip

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

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

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

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

background-origin

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

background-size

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

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

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

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

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


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

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

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

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

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

Фон в 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 — задает цвет фона для любого Html элемента;
  • background-image — с помощью этого атрибута в качестве фона можно использовать картинку;
  • background-repeat — параметр повторения фоновой картинки;
  • background-position — позволяет указать позицию фонового изображения относительно элемента web страницы;
  • background-attachment — устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента веб страницы.

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

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:

Илон Маск рекомендует:  Что такое код childwindowfrompoint

Для этого абзаца в качестве фона установлена картинка 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 — фоновое изображение будет повторяться и по горизонтали и по вертикали. Это значение по умолчанию.

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

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

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


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

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

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

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

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

  • left — в этом случает фоновая картинка прижимается к левому краю элемента (значение по умолчанию);
  • center — фоновое изображение располагается по центру элемента;
  • right — фон прижимается к правому краю элемента.

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

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

  • top — фоновая картинка прижимается к верхнему краю элемента (значение по умолчанию);
  • center — фоновое изображение располагается по центру;
  • bottom — фон прижимается к нижнему краю.

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

Например, для смещения фонового изображения для этого абзаца на 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 правило:

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

  • 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% (по правому нижнему углу)

На практике я советую использовать цифровые значения (будь это абсолютные или относительные величины), потому что первая цифра это всегда позиция по 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 нечего. Не забудьте подписаться на обновления блога, чтобы не пропустить выход новых статей! До новых встреч!

Background в CSS (color, position, image, repeat, attachment) — все для задания цвета фона или фоновой картинки Html элементов

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы рассмотрим пять CSS правил, которые позволяют задать фон для любого элемента в Html — background-position (image, repeat, color, attachment). Ну, и про составное правило Background тоже не забудем упомянуть.

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

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

Color, background-color и background-image

Давайте сначала посмотрим, как задается цвет Html элементов с помощью Css правила color. На самом деле тут все просто. Синтаксис совершенно обычный и цвет вы можете задавать в соответствии с тем, как это делали в языке гипертекстовой разметки. Как вы помните, цвета можно задавать с помощью шести цифр кода, поставленных после знака решетки (хеша — «#fe35a3»), либо с помощью трех цифр, если первая совпадает со значением второй, третья с четвертой, ну, а пятая, соответственно, с шестой (код цвета «#aa33ff» можно кратко записать как «a3f»).

Так же цвета в Html и Css коде можно будет представлять в виде слов (например, «red»), но чаще всего используется именно шестнадцатеричный код:

Для примера я окрасил этот маленький абзац в тот цвет, который приведен выше (#303). Теперь он слегка отличается от цвета всех остальных абзацев (более темный), который задан как #555 в файле CSS используемой мною темы WordPress. Но задание цвета через color это довольно просто, а вот с фоном будет немного посложнее.

Итак, за фон в Css отвечают пять правил, которые при желании могут быть объединены в одно сборное. Чтобы их увидеть, можете перейти на страницу текущей спецификации консорциума W3C и поискать там что-нибудь со словом Background:


    background color — с помощью этого правила задается цвет фона для любого Html элемента. В нем можно использовать либо код, либо название оттенка, т.е. все в точности так, как и было при использовании color.

background image — с помощью него можно в качестве фона использовать картинку (но обязательно прочитайте про то, как уменьшить вес фотографии, ибо тяжелые картинки будут тормозить загрузку страниц), путь до которой будет указан в функционале url ().

Путь можно указывать в Url как относительный, так и абсолютный. Использование фоновой картинки вовсе не запрещает вам одновременно использовать заливку цветом с помощью background-color. Эти CSS правила не являются взаимоисключающими.

  • background repeat — можно задать повторение картинки фона либо только по горизонтали в один ряд, либо только по вертикали, либо вообще запретить ее повторение.
  • background position — позволяет точно задать позицию этого изображения как в процентах, так и в абсолютных величинах
  • background attachment — позволяет выбрать тип привязки точки отсчета при позиционировании изображения для фона: либо относительно конкретного Html элемента, либо относительно области просмотра (видимой на экране компьютера области веб страницы).
  • Начнем с правила background-color — оно позволяет задать цвет фона для любого Html элемента, которому это правило будет адресовано с помощью селекторов в файле стилей (ну, или в котором оно может быть прописано с помощью атрибута Style).

    Если вы заглянете в спецификацию, то увидите, что по умолчанию цвет фона в любом элементе будет прозрачный (значение по умолчанию правила «background-color:transparent»). Правда, в элементах форм (select, input) он по умолчанию будет не прозрачным, т.к. это системные элементы и у них все по другому и отличается от обычных тегов языка гипертекстовой разметки.

    Цвет в background-color задается стандартно (шесть или три цифры шестнадцатеричного кода, либо слово):

    Например, фон этого абзаца задан именно через background-color с приведенным чуть выше кодом цвета.

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

    Если вы посмотрите в спецификацию языка стилевой разметки, то увидите, что для background-image по умолчанию используется значение «none» (т.е. никакого изображения для фона не используется). Ну, а если это все-таки нужно, то в функционале url () вам потребуется указать до него путь:

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

    Т.е. при использовании только одного правила background-image с указанием пути до графического файла, это самое изображение будет размножено как по вертикали, так и по горизонтали до тех пор, пока не покроет собой всю область отводимую на веб странице под данный конкретный Html элемент (в нашем примере это был абзац). Почему так происходит?

    Background-repeat — повтор фоновой картинки

    Да потому, что мы не прописали никакого значения для CSS правила background-repeat, а значит для него будет использоваться то значение, которое принято по умолчанию. Заглянув в спецификацию мы узнаем, что это значение соответствует «repeat» (повтор изображения по всем осям). Ответ нашелся сам собой.

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

    1. repeat — задает повтор картинки как по оси абсцисс (ось X, если еще не забыли школьный курс алгебры), так и по оси ординат (ось Y). Используется по умолчанию и указывать его специально в правиле не нужно
    2. repeat-x — она будет повторяться только по горизонтали и получится в результате только одна строка с повторами. Не забудьте, что правило background-repeat не будет работать, если вы не задали в background-image путь до фоновой картинки:
    3. repeat-y — будет повторяться только по вертикали (получится один столбец из повторов):
    4. no-repeat — вообще не будет повторяться и мы получим одно единственное изображение в левом верхнем углу области того Html элемента, для которого оно используется:
    Илон Маск рекомендует:  Конические градиенты в CSS

    Background-position — позиционирование фона

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

    Посмотрев на спецификацию CSS становится ясно, почему фоновая картинка по умолчанию прижимается именно к верхнему левому краю области Html элемента. Потому что значение «0% 0%» является умолчательным для правила background position.

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

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

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

    Работа с картинками (изображениями) в CSS

    2013-03-01 / Вр:23:32 / просмотров: 103336

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

    Фоновая картинка.

    background | background-image

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

    Как выбрать графический путь? Графический путь будет зависеть от того, где он располагается.
    Например, если HTML-файл и фоновый рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif), если фоновый рисунок хранится в папке images, тогда путь будет вот таким url(images/bg.gif).

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

    Повтор фоновой картинки.

    background-repeat


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

    background-repeat: repeat-y | repeat-x | no-repeat;

    repeat-y — повтор фонового изображения по оси — у (вертикаль);
    repeat-x — повтор фонового изображения по оси — х ( горизонталь);
    no-repeat; — запретить повтор фонового изображения (изображение будет как оно есть);

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

    Как добавить две фоновые картинки на веб-страницу.

    background

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

    Картинка по центру.

    Существуют несколько методов установить картинку по центру.

    Как в css изменить размер картинки.

    background-size

    Не зависимо от оригинала картинки, размер можно менять от меньшего до большего. В CSS для изменения размера картинки поможет свойство background-size.
    В свойстве background-size могут применяться абсолютные единицы измерения, такие как px, em, cm и др..

    По умолчанию ширина и высота установлена как auto, что оставляет исходные размеры изображения.

    Например, вы загрузили на сайт картинку размерами 200×200 px, но вам по каким-то причинам нужно ее увеличить до размера 500×200 px . Вот так будут выглядеть параметры background-siz.

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

    а можно вот так:

    Обтекание (выравнивание) картинки текстом.

    float

    Как сделать в CSS так, чтобы на странице изображение обтекало текстом? Выравнивание картинки в CSS аналог HTML-выравнивания картинки , вот только в CSS по какой стороне будет выравнивание элементов определяет float.

    float: left | right | none ;

    left — выровнять картинку по левому краю, текст обтекает его по правой стороне.

    right — выровнять картинку по правому краю, текст обтекает по левой стороне.

    none — выравнивание и обтекание не задается (значение по умолчанию).

    Здесь я указал отступы текста от картинки

    Тень картинки.

    box-shadow

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

    1. — inset — тень внутри элемента, без inset тень будет наружу;
    2. — сдвиг тени по горизонтали (6px — вправо, -6px — влево);
    3. — сдвиг по вертикали (6px — вниз, -6px — вверх);
    4. — размытие тени (0 — четкая тень);
    5. — растяжение тени (3px — растяжение, -3px — сжатие);
    6. — цвет тени

    box-shadow: 0 0 5px; — тень вокруг элемента

    box-shadow: inset 0 0 5px; — тень внутри

    Прозрачность картинки.

    Начну сразу с примера.

    Обратите внимание в коде на opacity:0.4 . Поиграйтесь со значением этого свойства и вы увидите на сколько увеличивается или уменьшается прозрачность картинки.

    С наилучшими пожеланиями Webmasterok2009

    Как сделать фон в html и CSS?

    Здравствуйте, дорогие друзья!

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

    Как в html сделать фон в виде цвета или картинки?


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

    • при помощи цвета,
    • использовать изображение,
    • градиентный фон,
    • использовать сразу несколько вариантов (например, картинка + цвет или несколько картинок сразу).

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

    Чтобы в html сделать фон нам понадобится атрибуты bgcolor и background.

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

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

    Как сделать фон в CSS?

    Как я уже писала выше мы можем использовать разные варианты задания фона и для всех их нам понадобится свойство background с разными значениями. Для того чтобы его использовать нам нужно сделать следующее:

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

    2. В файле, в котором вы задаёте CSS стили для вашего сайта, нужно дописать для этого класса свойство background с нужным значением фона.

    Как сделать фон в виде цвета в CSS?

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

      1. Кодовое название цвета

    Уровень прозрачности задаётся в виде десятичного значения от 0 до 1, где 0 – полностью прозрачный, а 1 – не прозрачный.

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

    Как сделать фон в виде картинки в CSS?

    Для этого нам нужно будет:

    1. 1. К себе на сайт в определённую папку с картинками загрузить изображение, которое мы хотим использовать в качестве фона.
    2. 2. Задать его в CSS

    В скобочках указываем путь к картинке.

    Так же если изображение у вас небольшое то будьте готовы увидеть такую картину:

    Вы можете отключить повторение фона для маленьких изображений, дописав no-repeat:

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

    Или только по вертикали:

    Кроме того мы можем управлять расположением фонового изображения для элемента. Для этого нам нужно дописать следующе:

    • top – для выравнивание по верхнему краю
    • bottom — для выравнивания по нижнему краю
    • left – выравниваем по левому краю
    • right – по правому
    • center – выравниваем по центру (можно использовать как для выравнивания по горизонтали так по вертикали)

    Так же можно сочетать эти выравнивания.

    Как растянуть фоновое изображение под размер элемента?

    По умолчанию фоновое изображение не подстраивается под размер элемента. В эпоху адаптивных дизайнов это доставляет много неудобств. Для решения этой проблемы можно использовать свойство background-size.

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

    Как изменить расположение фона внутри элемента?

    Кроме описанных выше значений top, bottom, left, right и center мы так же можем использовать значения в пикселях, процентах и em чтобы выставить фоновую картинку так как нам нужно.

    Воспользуемся свойством background-position:

    CSS свойство background

    Короткое свойство, устанавливающее все свойства фона элемента за одну декларацию. Позволяет установить одновременно до пяти атрибутов стиля фона – background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment. Одновременно допустимо определять любые атрибуты.

    CSS синтаксис

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

    Значение Описание
    background-color Устанавливает цвет фона.
    background-image Устанавливает фоновое изображение.
    background-position Устанавливает положение фонового изображения.
    background-size Устанавливает размер фонового изображения.
    background-repeat Определяет, как будет повторяться фоновое изображение.
    background-origin Устанавливает область позиционирования фонового изображения.
    background-clip Устанавливает область прорисовки фонового изображения.
    background-attachment Устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
    initial Устанавливает значение по умолчанию.
    inherit Значение наследуется от родительского элемента.

    Если среди параметров присутствует декларация размера bg-size, то он должен быть отделен от параметра позиции bg-position при помощи слэша (/), например, background:url(smiley.gif) 10px 20px/50px 50px; задает фоновое изображение, расположенное в позиции 10 пикселей от левого края, 20 пикселей от верхнего края, и размер изображения будет 50х50 пикселей.

    Если устанавливается несколько фоновых изображений, но при этом нужно еще установить и фоновый цвет, то параметр background-color должен быть последним в списке.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL