Триколор 

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

Здравствуйте, уважаемые читатели блога сайт. Сегодня мы рассмотрим пять 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:

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

    2. 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 для изменения курсора мыши

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

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

Синтаксис

background-repeat: стиль повторения [, стиль повторения ]*

где стиль повторения — одно из поддерживаемых значений.

Значения

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

No-repeat Фоновое изображение, заданное свойством background-image не повторяется. Эквивалентно no-repeat no-repeat repeat Фоновое изображение повторяется по вертикали и горизонтали. Эквивалентно repeat repeat repeat-x Фоновое изображение повторяется по горизонтали. Эквивалентно repeat no-repeat repeat-y Фоновое изображение повторяется по вертикали. Эквивалентно no-repeat repeat inherit Наследуется значение родительского элемента space Фоновое изображение повторяется столько раз, чтобы заполнить все пространство без обрезки изображения. В случае необходимости добавляются отступы между изображениями. Эквивалентно space space round Фоновое изображение повторяется столько раз, чтобы заполнить все пространство без обрезки изображения. В случае необходимости изображения масштабируются. Эквивалентно round round

Давайте начнем.

Предварительные работы над нашем фоном

Для начала нам необходимо просто нарисовать какой либо фон.

  1. Создаем новый документ 600 на 600 пикселей

  1. Я выбрал два цвета #F1F1F1 и #E4E4E4

  1. Теперь применяем к созданному документу фильтр Clouds . (фильтр -> Render -> Clouds )
  2. После чего несколько раз Difference Clouds . (фильтр -> Render -> Difference Clouds ) В общем Вы должны получить приблизительно вот такую картинку:

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

Как видите границы стыковки изображений очень четко видны, нам необходимо избавится от них!

Нарезаем изображение

  1. Давайте первым делом создадим копию нашего фона на новом слое, а сам фон зальем белым цветом

  1. Теперь создадим, в левом нижнем углу, выделение 450 на 450 пикселей

  1. Жмем Shift + Ctrl + J, таким образом мы вырежем из слоя с фоном выделенную область

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

  1. Теперь выделяем правую границу и жмем Shift + Ctrl + J, для того чтобы верхняя и правая граница были на отдельных слоях.

Теперь у нас имеется четыре слоя:

  • Белый фон
  • Верхняя граница
  • Правая граница
  • Квадрат размером 450 на 450 пикселей

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

Убираем границы у фона. Создаем повторяющийся фон

Для чего нам необходимо было нарезать фон на три части? Если верхнюю границу сдвинуть в самый низ, а правую влево, и чуть чуть с ними (с границами ) по колдовать, то мы получим именно то, что создаем в данном уроке!! =)

  1. Давайте сдвинем границы и получим следующий результат:

  1. Теперь нам необходимо у сдвинутой правой границы удалить один из углов. Смотрите скрин ниже

Удалять необходимо именно под таким углом. Нам очень Важно что бы правая часть сдвинутой правой границы была не тронута

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

  1. Теперь необходимо слить сдвинутую правую границу и сдвинутую верхнюю границу.

  1. Далее нам необходимо удалить верхний и правый угол у наших, уже слитых, границ. Внимание на скрин

  1. Теперь нам необходимо (опять ) подогнать рисунок с помощью ластика. Вот как выглядит изображение у меня:

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

Обратите внимание, что затирать можно лишь внутреннею сторону . Внешнюю трогать нельзя!

  1. Ну что же, осталось слить изображение

Заключение

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

Надеюсь данный урок Вам покажется полезным =) Если у Вас возникли какие либо вопросы, то пользуйтесь формой ниже =)

Если данный блог Вам показался интересным, то подпишитесь на RSS ленту блога через ридер, или же по почте .

Всего Вам наилучшего! На сегодня у меня все!

P.S.: Я Вам ни раз рассказывал о замечательной РПГ которая изменила всю мою жизнь. Так вот, она вышла в далеком 2002-ом году. За ~9 лет компания Bethesda Softworks успела выпустить еще две части древних свитков. Последняя часть (Скайрим ) вышла в ноябре 2011 года. Если Вы еще не играли в нее, и не знаете стоит ли, то могу посоветовать Вам посетить раздел скайрим на сайте arbse.net. Почитайте изложенную на данном ресурсе информацию, она поможет Вам определиться =)

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

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

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

И так, начнем.

Мы будем пользоваться сайтом www.stripegenerator.com .

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

Вот как выглядит сам генератор:

Как видите ничего сложного и всё логически понятно. Но всё равно хотелось бы дать понятия всем разделам:

Функции генератора

  • stripe size — это ширина самой полоски, которая в данном случае красная;
  • spacing — расстояние между красными полосками;
  • stripe color(s) — цвет полоски. Как видите по умолчанию стоит красный цвет, который можно изменить. А также добавить ещё несколько цветов по душе.
  • background style — стиль фона паттерна. На выбор есть два градиента.
  • shadow — классная функция, с помощью которой настраивается тень от полоски. Этот параметр придаёт объёмности паттерну.
  • background color(s) — с помощью этой функции Вы сможете настроить цвет фон. По умолчанию стоит белый.
  • stripe orientation — стиль и наклон полоски. Выбор не большой, но этого вполне хватает.

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

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

Вот в принципе и всё, что хотелось сказать о этом генераторе. Всё просто и качественно.

Ну а теперь представляю Вам ещё несколько простых генераторов бесшовных фонов. Поехали.

Генераторы бесшовных фонов

www.tartanmaker.com

Не плохой и простой , который делает клеточные фоны. Так же есть несколько настроек, которые помогут сделать Вам паттерн.

www.bgpatterns.com

Замечательный генератор паттернов. Есть много настроек, а также есть несколько изображений, которые Вы сможете использовать. Чтобы убрать изображение, прозрачность нужно поставить на 0.

www.stripemania.com

Ещё один отличный генератор полосатых фонов

bgmaker.ventdaval.com

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

lab.rails2u.com

Генератор полосатых фонов

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