Здравствуйте, уважаемые читатели блога сайт. Сегодня мы рассмотрим пять CSS правил, которые позволяют задать фон для любого элемента в Html — background-position (image, repeat, color, attachment). Ну, и про составное правило Background тоже не забудем упомянуть.
Ничего сложно в этом нет, но есть определенные тонкости и нюансы, которые необходимо знать и уже готового шаблона (помните про , который поможет открыть всю подноготную любого дизайна).
Еще раз напомню, что данная статья входит в серию и лучше всего будет начинать изучение стилевой разметки сначала, а именно со статьи про то, что такое CSS и с чем его едят, ну, а дальше следовать в порядке заданном в справочнике. Хотя, в любом случае решать вам, а сейчас давайте поговорим все же про задание фона.
Color, background-color и background-image
Давайте сначала посмотрим, как задается цвет Html элементов с помощью Css правила color . На самом деле тут все просто. Синтаксис совершенно обычный и цвет вы можете задавать в соответствии с тем, как это делали в языке гипертекстовой разметки. Как вы помните, поставленных после знака решетки (хеша — «#fe35a3»), либо с помощью трех цифр, если первая совпадает со значением второй, третья с четвертой, ну, а пятая, соответственно, с шестой (код цвета «#aa33ff» можно кратко записать как «a3f»).
Так же цвета в Html и Css коде можно будет представлять в виде слов (например, «red»), но чаще всего используется именно шестнадцатеричный код:
Color:#303
Для примера я окрасил этот маленький абзац в тот цвет, который приведен выше (#303). Теперь он слегка отличается от цвета всех остальных абзацев (более темный), который задан как #555 в файле CSS используемой мною темы WordPress. Но задание цвета через color это довольно просто, а вот с фоном будет немного посложнее.
Итак, за фон в Css отвечают пять правил, которые при желании могут быть объединены в одно сборное. Чтобы их увидеть, можете перейти на страницу текущей спецификации консорциума W3C и поискать там что-нибудь со словом Background:
- background color — с помощью этого правила задается цвет фона для любого Html элемента. В нем можно использовать либо код, либо название оттенка, т.е. все в точности так, как и было при использовании color.
background image — с помощью него можно в качестве фона использовать картинку (но обязательно прочитайте про то, ибо тяжелые картинки будут тормозить загрузку страниц), путь до которой будет указан в функционале url ().
Если вы заглянете в спецификацию, то увидите, что по умолчанию цвет фона в любом элементе будет прозрачный (значение по умолчанию правила «background-color:transparent»). Правда, в элементах он по умолчанию будет не прозрачным, т.к. это системные элементы и у них все по другому и отличается от обычных тегов языка гипертекстовой разметки.
Цвет в background-color задается стандартно (шесть или три цифры шестнадцатеричного кода, либо слово):
Background-color:#FEFCDE
Например, фон этого абзаца задан именно через background-color с приведенным чуть выше кодом цвета.
Все остальные четыре CSS правила будут касаться только фоновой картинки, которую можно задать для любого Html элемента и, при желании, точно ее позиционировать. Какой именно графический файл будет использоваться, можно задать с помощью background-image .
Если вы посмотрите в спецификацию языка стилевой разметки, то увидите, что для background-image по умолчанию используется значение «none» (т.е. никакого изображения для фона не используется). Ну, а если это все-таки нужно, то в функционале url () вам потребуется указать до него путь:
Background-image:url(https://сайт/image/comment_top_focus.gif);
Например, для этого абзаца я использовал графический файл с фоном, путь до которого описан чуть выше. Видите, что вся область, отведенная под этот абзац, застилилась повторяющимся изображением, которое в оригинале имеет такой вид:
Т.е. при использовании только одного правила background-image с указанием пути до графического файла, это самое изображение будет размножено как по вертикали, так и по горизонтали до тех пор, пока не покроет собой всю область отводимую на веб странице под данный конкретный Html элемент (в нашем примере это был абзац). Почему так происходит?
Background-repeat — повтор фоновой картинки
Да потому, что мы не прописали никакого значения для CSS правила background-repeat , а значит для него будет использоваться то значение, которое принято по умолчанию. Заглянув в спецификацию мы узнаем, что это значение соответствует «repeat» (повтор изображения по всем осям). Ответ нашелся сам собой.
Следовательно, с помощью background-repeat мы сможем управлять повторениями фоновой картинки . У этого правила может быть только четыре значения:
Background-position — позиционирование фона
Теперь возникает вопрос, а можно ли фоновую картинку отодвинуть от левого верхнего угла области ограничивающей размер элемента. Конечно же, можно, и для этой цели служит отдельное правило background-position :
Посмотрев на спецификацию CSS становится ясно, почему фоновая картинка по умолчанию прижимается именно к верхнему левому краю области Html элемента. Потому что значение «0% 0%» является умолчательным для правила background position.
Ну, а когда это правило в явном виде для элемента не задано (как в нашем случае), то браузер выбирает то его значение, которое принято в спецификации по умолчанию (замечу, что отчет осей координат в CSS ведется как раз от верхнего левого края области элемента).
Так же из спецификации видно, что для позиционирования изображения фона с помощью background-position можно использовать как относительные (проценты), так и абсолютные величины (например, ). Ну, а так же можно использовать слова, которые будут соответствовать определенным цифровым значениям. Но обо все по порядку.
При задании позиционирования изображения фона с использованием абсолютных единиц в background-position имеет место быть следующий принцип определения его итогового положения:
Т.е. браузер будет рассчитывать заданные отступы по осям X и Y от начала координат области, в которой позиционируется объект, до начала координат этого самого изображения. Например, в этом абзаце я позиционировал фоновое изображение через background position с помощью следующих CSS правил:
Background-image:url(https://сайт/image/logo.png); background-repeat:no-repeat; background-position:400px 25px;
Обратите внимание, что оно в данном случае будет выровнено по центру области просмотра, а не по центру области отведенной под эти параграфы. Понятно, что в реальности такое размещение фоновой картинки вряд ли найдет применение.
Однако, если задать фиксированное положение фона для таких элементов как Body или же Html (т.е. в тегах, которые охватывают всю веб страницу), то данная картинка будет видна всегда в области просмотра и именно такое применение находит CSS свойство background-attachment в современной блочной верстке.
Есть еще сборное правило Background , которое позволяет объединить все пять описанных выше правил в одном флаконе. Причем, значения для всех пяти в сборном варианте можно будет использовать в любом порядке и в любом количестве (они уникальны и браузер их друг с другом не перепутает). Все, что вы не укажете в явном виде, браузер посчитает равным значению по умолчанию.
Png) no-repeat 50%;
Показанное в примере сборное правило применено к этому абзацу для наглядности. Получилось не красиво, но это не главное. Для данного параграфа используется фоновая заливка странного желтого цвета, а так же используется изображение логотипа Лайвинтернет, выровненное по центру абзаца. Т.к. для правила background-attachment никакого значение не задано, то используется значение scroll (принятое по умолчанию).
Если для какого-то элемента вы хотите задать лишь заливку цветом, а с фоновым изображение не заморачиваться, то вполне можете вместо:
Background-color:#FEFCDE
написать:
Background:#FEFCDE
Ибо все остальные значение сборного правила будут взяты по умолчанию, а вам это и нужно было.
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Float и clear в CSS - инструменты блочной верстки
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Одна из самых распространённых задач при редактировании текста и блоков в HTML и CSS. С ней может столкнуться не только верстальщик, но и любой контент-менеджер, который редактирует содержимое сайта. Для решения данного вопроса используется всего два свойства: color - цвет текста, background - работа с фоном, цвет или изображение.
Работа со цветом теста в CSS
color - это свойство, которое нужно для указания цвета только для текста. Цвет можно указать как в формате HTML HEX кода, так в формате RGB (Red Green Blue). Коды цвета можно выбрать либо в графических программах, например, Photoshop, либо в онлайнСинтаксис свойства:
Color: Цвет;
Теперь применяем свойство:
Content {
color: #444; // тёмно-серый текст в элементе с классом content
}
Почему именно такой пример: указание цвета для ссылки и для текста - это разные вещи. Запомните. Ну и от себя рекомендую делать цвет текста и ссылки разного цвета.
Работа с фоном в CSS
background - это свойство, которое позволяет работать с фоном изображения: устанавливать цвет фона, устанавливать в качестве фона изображение (форматы jpg, gif, png), изменять положение фона и другие параметры, которые описаны ниже.background-color - это свойство используется только для установки цвета фона. Принимает только код цвета. Цвет можно указать в формате RGB (Red Green Blue), либо в формате HTML HEX кода.
Block {
background-color: #fbb5b5; // установим пастельный алый цвет для фона
}
Лучшие примеры цветов для фона (современные дизайн-модели: Flat Design и др):
background-image - это свойство, которое используется для установки какого-либо изображения в качестве фона в элементе. Для указания изображения достаточно параметра url и пути к изображению относительно файла с css-стилями.
#back {
background-image: url("images/fon.jpg");
}
background-repeat - может использоваться только в том случае, когда выше было указано свойство background-image. Данное свойство устанавливает правило повтора изображения. По умолчанию, изображение повторяется по оси X и по оси Y до границ элемента (если фон меньше элемента). В свойстве можно указать настройку, чтобы изображения повторялось только по оси X - repeat-x (по горизонтали), только по Y - repeat-y (по вертикали) или вообще не повторялось вообще - no-repeat.
#content {
background-repeat: repeat-x; /* изображение будет повторяться только по горизонтали до границ блока */
}
background-attachment - фиксирует фон в одном положении, то есть будет изображение прокручиваться вместе с содержимым блока или останется фиксированным. По умолчанию стоит значение scroll, что не фиксирует положение фона.
#content {
background-image: url("background.jpg");
background-repeat: repeat-x; /* изображение будет повторяться лишь по горизонтали */
background-attachment: fixed; /* закреплено в расположении */
}
background-position - свойство, которое задаёт расположение фона в элементе. Задаётся два значения: расположение по горизонтали и затем по вертикали. Задаётся либо в цифровом (пиксели и проценты), либо в буквенном варианте (left, center, right, top, bottom). Данное свойство нужно в том случае, когда изображение не повторяется (no-repeat), а фон нужно расположить в элементе определённым образом.
#block {
background-position: left center; /* по горизонтали - по левой стороне, по высоте - посередине */
}
В комментарии думаю всё понятно)
Пример написания цифирного значения:
#keys {
background-position: 109px 57px; /* отступ слева 109px, сверху 57px */
}
Тут думаю тоже всё должно быть понятно.
Много свойств? Смотрим как писать сокращённо.
В итоге. Сокращённая запись background в CSS
Можно использовать сокращённую запись, где все параметры будут указаны в строчку:Background: color image repeat attachment position;
О плюсах. Подобная запись сокращает время загрузки страницы и рендеринг браузером. Пожалейте посетителей, записывайте лучше таким образом, если, конечно, Вам нужно несколько свойств.
Да, пропустить какое-либо свойство, в случае отсутствия потребности в нём, можно! Просто продолжаете дальше указывать значения дальше по списку.
Block {
background: #f1f1f1 url("background.jpg") repeat-x scroll 100px 125px;
}
Пример работы фонов background в CSS
Код примера. Результат работы и исходники можете посмотреть по ссылке ниже.