Css свойство background

Multiple backgrounds #

As mentioned at the beginning of the module, the background layer allows multiple sublayers to be defined. For brevity, I’ll refer to these sublayers as backgrounds.

Multiple backgrounds are defined top to bottom; The first background is the closest to the user, while the last background is the furthest from the user.

The only background defined or the last layer is designated the final background layer by the browser. Only this layer is allowed to assign a .

Multiple layers can be individually configured using most background-related CSS properties that are comma separated, as demonstrated in the code snippet and live demo below.

Иконка соцсети без текста

Почти на любом сайте есть блок со ссылками на Facebook*, «ВКонтакте», Instagram* и другие соцсети:

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

Здесь есть пара нюансов:

• Раз текста нет, то у ссылки нет размеров. А фона без размеров не бывает (нельзя покрасить стену, когда самой стены нет).
• Если мы зададим размеры ссылке, то они не сработают, так как по умолчанию ссылка — строчный элемент (его размер не изменить с помощью свойств width и height).

Обойдём эти ограничения.

Сперва напишем простую разметку — список ссылок. Классы сделаем по БЭМ, чтобы наш компонент было удобно стилизовать и использовать повторно.

Начнём, конечно, с HTML-кода:

Далее — CSS:

• Заметьте, что свойству display для ссылок мы задали значение inline-block. Поэтому наши ссылки стали строчно-блочными элементами. Теперь можно задать им ширину и высоту — и это уже сработает.
• Одинаковые для всех элементов стили (background-position, background-size, background-repeat) мы вынесли в общий класс social__link.
• А вот фоновые изображения у нас разные — их мы задаём в разных классах.

Background position #

Browser support

• Chrome 1, Supported 1
• Firefox 1, Supported 1
• Edge 12, Supported 12
• Safari 1, Supported 1

You may have noticed when some images on the Web are styled with a declaration, such images are displayed top left of their container.

The initial position of background images is top left. The property allows you to change this behavior by offsetting the image position.

As with , the property allows you to position images along the x and y axis independently with two values by default.

When CSS lengths and percentages are used, the first parameter corresponds to the horizontal axis while the second parameter corresponds to the vertical axis.

When keywords are only used the order of the keywords does not matter:

Do

Do

Do

Order does not matter for keywords associated with different axes of position.

Don’t

When CSS values are used alongside keywords, the order matters. The first value represents the horizontal axis and the second the vertical axis.

Don’t

You cannot use keywords associated with the same axis simultaneously.

The property also has a convenient one value shorthand; the omitted value resolves to . Here’s an example that demonstrates this using the keywords the property accepts:

In addition to its default two parameter form and one parameter form; the property also accepts up to four parameters;

When three or four parameters are used, a CSS length or percentage must be preceded by the , , , or keywords in order for the browser to calculate which edge of the CSS box the offset should originate from.

When three parameters are used, a CSS length or value can be the second or third parameter with the other two being keywords; the keyword it succeeds will be used to determine the edge the CSS length or value corresponds to being the offset of. The offset of the other keyword specified is set to 0.

Do

Do

Don’t

CSS length value must be preceded by the , , , or keywords when using three or more parameters.

Do

Do

Don’t

CSS length value must be preceded by the , , , or keywords when using three or more parameters.

If is applied to a CSS background image, the image is placed at the top of the box, the value represents a 20% offset from the left of the box (on the x axis).

If is applied to a CSS background image, the 20% value represents a 20% offset from the top of the CSS box (on the y axis), and the image is placed at the left of the box.

When four parameters are used, the two keywords are paired with two values corresponding to an offset against the origins of each keyword specified. If is applied to a background-image, the background-image is positioned 20% from the bottom, and 30% from the right of the CSS box.

The following demo demonstrates this behavior:

Here are more examples of using the property using a mix of CSS and keyword values:

The tag

Now that you have the gist of using attributes in tags, this should make perfect sense. Remember the tag from the first page, which everything visible on your page goes into? That is the tag we’ll be adding to in this, as it’s been left untouched up until now. There are 7 attributes to be added here, and they all change how your page looks.

bgcolor

This is the colour of the BG, or BackGround, of your page. You need to put the colour in as a HEX code, like the rest of these colours. What are HEX codes? Glad you asked. Because it means you have to read ! If you want to see a list of HEX codes for 216 different colours, look at this chart. The code is:

Note that, even though the default BG is white, you should still code in , because older browser’s default BG is a nasty grey.

text

This will change the colour of all the text on your whole page, unless you have changed the colour manually (find out how in the text section). Your best bet here is to leave it black, because that’s the easiest to read. Code!

Instead of the normal blue, you can now change the colour of all your links to something a bit more classy.

vlink

Links change colour once you have clicked on them, from blue to purple. The V stands for ‘Visited’. You can change this too, but make sure it is visibly different to the colour, otherwise people will get confused.

alink

When you click on a link, it changes colour momentarily, to show you that you’ve clicked it I guess. If you click the ‘Back’ button, it is highlighted as being Active so you don’t click through on it again. The default is usually red. Make sure you highlight it right; it’s a nice feature.

background

If you want to put an image as your background, use this attribute, and set the value to the same as you would for an image (don’t know how? Read the preceding lesson on images). You can also link to an image from another site, by giving the entire URL.

Whatever image you choose to use, it will be tiled across your page, filling it up. That means it will repeat itself across your page, so choose one that doesn’t look too obvious.

If you want your background to be set in place and not scroll, add the attribute into the . This will leave the image as a watermark.

margins

There are two sets of margins on a page, the ones at the sides and the ones at the top and bottom. The two main browsers use different attributes to put in these margins, so when you change one, change the other as well.

• For Internet Explorer: and
• For Netscape: and

Despite this, the units of measurement are the same — pixels, so to make your margins the same in both browsers just set them both to the same value.

Show me the code
So now, a complete tag would look something like this:

Summary

Adding backgrounds and gradients to our pages allows us to bring color to the forefront of our designs. These features also help to define how content is grouped and to improve the layout of our pages as a whole.

To review, this lesson covered the following:

• How to add background colors and images to elements
• CSS gradients, both linear and radial, and how to customize them
• How to apply multiple background images to a single element
• New CSS3 properties that allow us to change the size, surface area, and origin of background images

Adding background colors, gradients, and images brings forth quite a few possibilities to enhance the overall design of our websites. Soon we’ll discuss how to semantically add images (aside from background images) and other media to our pages. But before that, let’s take a look at how to semantically create lists.

Способы подключения CSS

Таблицу стилей можно прописать конкретно в коде HTML-страницы, обрамив правила тегами <style>. Или хранить в отдельном файле .css — и применять для многих страниц. Это внутренние и внешние таблицы стилей. Их еще называют глобальными и связанными.

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

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

Например, в случае данного абзаца (p) в таблице стилей создается селектор класса, например, skill:

А затем тег этого абзаца трансформируется из 

в 

Так можно грамотно подключать стили к документу вместо того, чтобы прописывать встроенные стили. У этого метода ряд очевидных преимуществ: гораздо удобнее хранить стили изолированно и отдельно от документа: так их легче редактировать и применять к разным документам (вдруг вы захотите использовать тот же класс skill для еще одного абзаца?). Но главное — так соблюдается концептуальное разделение контента (HTML) и оформления (CSS).

Внутренние таблицы стилей

Возьмем тот же простой стиль, который определяет размер шрифта (font-size) и цвет (color) для абзацев (p) на странице.

Этот код можно внедрить непосредственно в конкретную HTML-страницу, обрамив тегами <style>…</style>. Все это вставляется в код страницы сразу после заголовка (тег <title>).

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

…и так далее.

Полный код такой страницы:

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

Просто принято оформлять код именно так для лучшей читаемости, при этом перед объявлениями ставится табуляция или несколько пробелов.

Сейчас мы создали внутреннюю таблицу стилей, которую в будущем сможем редактировать по своему желанию: добавлять новые правила, то есть селекторы и объявления для любых элементов на странице. Более того, можно даже вынести ее в отдельный файл .css — и применить сразу для многих HTML-страниц. Это уже будут внешние таблицы стилей.

Внешние таблицы стилей

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

То есть в файле .css пишется все то же самое, что и во внутренних стилях. И наоборот: во внутренних стилях внутри тегов <style> можно писать все то же самое, что и в файле .css. Разница только в том, что внешние стили могут применяться сразу к нескольким страницам HTML и даже ко всему сайту целиком.

Теперь вместо тегов <style> в HTML-файлы нужно вставить код, который указывает на местонахождение внешней таблицы стилей. Он вставляется в то же самое место после заголовка (<title>), где мы раньше размещали встроенные стили:

Он будет выглядеть так:

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

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

Позиционирование фонового рисунка

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

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

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

Если положение задаётся с помощью двух значений в процентах, пикселах или других CSS-единицах, то первое из этих значений будет определять смещение начального положения рисунка по горизонтали, второе — его смещение по вертикали, например:

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

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

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

• (позиция в левом верхнем углу; является начальным положением по умолчанию);
• (позиция по центру вверху);
• (позиция в правом верхнем углу);
• (позиция по левому краю и по центру);
• (позиция по центру);
• (позиция по правому краю и по центру);
• (позиция в левом нижнем углу);
• (позиция по центру внизу);
• (позиция в правом нижнем углу).

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

Пример использования свойства :

<!DOCTYPE html>
<html>
<head>
   <title>Example</title>
   <style>
      body {
         
         background-image: url('images/bg.jpg');
         
         background-color: #c7b39b;
         
         background-repeat: repeat-y;
         
         background-position: 20px 0;
         padding-left: 20px;
      }
   </style>
</head>
<body>
   <h1>Lorem ipsum dolor</h1>
   <p> Lorem ipsum dolor sit
   amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam
   erat volutpat.</p>
   <p> Duis te feugifacilisi. Duis autem dolor
   in hendrerit in vulputate velit esse molestie consequat,
   vel illum.</p>
</body>
</html>

Результат в браузере:

CSS3 Размер фоновых изображений

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

Размер может быть указан в длинах, процентах или с помощью одного из двух ключевых слов:
или .

В следующем примере размер фонового изображения намного меньше размера исходного изображения (в пикселях):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Вот код:

Пример

#div1 {
   background: url(img_flower.jpg);
   background-size: 100px 80px;
   background-repeat: no-repeat;}

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

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

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

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

Пример

#div1 {
    background: url(img_flower.jpg);
    background-size: contain;   
background-repeat: no-repeat;}#div2 {
    background: url(img_flower.jpg);
    background-size: cover;   
background-repeat: no-repeat;}

Определение размеров нескольких фоновых изображений

Свойство также принимает несколько значений для размера фона
(через запятую), при работе с несколькими фонами.

В следующем примере заданы три фоновых изображения с различными фоновыми размерами каждого изображения:

Пример

#example1 {    background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;    background-size: 50px, 130px, auto;}

Полный размер фоновое изображение

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

Требования следующие:

• Заполнить всю страницу изображением (без пробелов)
• Масштабировать изображение по мере необходимости
• Центрировать изображение на странице
• Не вызывать полосы прокрутки

В следующем примере показано, как это сделать; используйте элемент html
(html — элемент всегда находится по крайней мере на верху окна браузера). Затем установите фиксированный и центрированный фон на нем.
Затем измените его размер с помощью свойства :

Пример

html {    background: url(img_flower.jpg) no-repeat
center fixed;     background-size: cover;}

CSS3 свойство background-origin

CSS3 свойство указывает, где находится установленное фоновое изображение.

Свойство принимает три различных значения:

• — фоновое изображение начинается с верхнего левого угла границы
• — (по умолчанию) фоновое изображение начинается с верхнего левого угла края отступа
• — фоновое изображение начинается с верхнего левого угла содержимого

Следующий пример иллюстрирует свойство :

Пример

#example1 {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: content-box;}

CSS3 Свойство background-clip

CSS3 свойство задает область рисования фона.

Свойство принимает три различных значения:

• — (по умолчанию) фон окрашивается к внешнему краю границы
• — фон окрашен по краям отступа
• — фон окрашивается в боксе содержимого

Следующий пример иллюстрирует свойство :

Пример

#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;}

Свойства CSS3 дополнение фона

Свойство	Описание
background	Сокращенное свойство для установки всех свойств фона в одном объявлении
background-clip	Определяет область рисования фона
background-image	Определяет одно или несколько фоновых изображений для элемента
background-origin	Определяет где фоновое изображение(я) является/являются позиционируемыми
background-size	Определяет размер фонового изображения(й)

❮ Назад
Далее ❯

Как задать фон страницы с помощью CSS?

Я открываю свой сайт. Он имеет фон — это изображение, которое повторяется вправо и вниз. Также мой сайт имеет изображение «Оставьте свой отзыв». Оно не повторяется, но при перемещении страницы оно фиксируется, то есть я прокручиваю страницу и всегда могу нажать эту кнопку. На самом деле эта тема уже немного другая. Она называется «Позиционирование элементов». Мы ее будем рассматривать в конце данного видеокурса. Вы наверняка спросите, почему я вам это сейчас показываю. А потому что с фоном можно сделать то же самое, то есть его можно повторять, его можно расположить в какой-либо части сайта и зафиксировать либо не зафиксировать.

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

 body { background: }
 

Итак, приступим. Что нам нужно сделать первым делом? Нам нужно задать цвет фона. Почему цвет так важен? Он важен потому, что если у человека задан фон на сайте, но не задан цвет, то у посетителя, у которого отключено отображение картинок, вместо фона будет показан белый цвет. А теперь представьте, каково будет его возмущение, если на сайте, к тому же, цвет текста — белый. Это нужно предусмотреть. Мы создадим сейчас цвет фона.

Давайте определимся с тем цветом, который мы хотим задать фону. Для этого я прикладываю таблицу цветов к этому видеоуроку. Например, я хочу задать сайту голубой цвет #33CCFF. Естественно в таблице представлены не все цвета. Существуют и другие оттенки. Но здесь выделены основные — так называемые RGB-цвета. Первые две цифры отвечают за красный (Red), вторые — за зеленый (Green), третьи — за синий (Blue).

 body { background: #33CCFF;}
 

Фон мы задали. Давайте сохраним нашу страницу и проверим ее в браузере. Открываем. Мы видим, что цвет фона стал тем самым, который мы выбрали.

Снова перейдем в код. Сейчас мы зададим фоновое изображение. Как это сделать? Оно задается с помощью url, который есть адрес нашей страницы, то есть сейчас мы введем адрес изображения, которое хотим сделать фоном. Если мы откроем папку сайта, зайдем в папку img, то увидим, что у нас есть изображение bg.JPG. Пропишем его вместо нашего фона. Не забываем указывать папку img.

 body { background: #33CCFF url(img/bg.jpg);}
 

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

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

 body { background: #33CCFF url(img/bg.jpg) repeat ;}
 

Чтобы оно не повторялось, нужно перед словом repeat поставить приставку no- .

 body { background: #33CCFF url(img/bg.jpg) no-repeat ;}
 

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

Background как свойство в каскадных стилевых таблицах

Он задается или в отдельном файле с css стилями, или в элементе <style>. С помощью данного свойства можно устанавливать фоновые рисунки или цвет, указывать начальное местоположение на странице, задавать повторяющиеся и фиксированные изображения. Для большей наглядности я оформил определения в таблице.

Параметры	Предназначение
background-attachment	Используется для установки фиксированного или прокручиваемого изображения вместе с контентом сайта. Бывает fixed, scroll и inherit
background-image	Задает изображение фона. Может указываться одновременно с цветом. Тогда последний будет отображаться, пока полностью не загрузится картинка
background-position	Задает начальное расположение объекта для предыдущего параметра. Горизонтально указывается right, left и center, а по вертикали – bottom, top и center. Помимо этого, можно наследовать положение (inherit), задавать в процентах, пикселях и других размерностях
background-repeat	Применим при использовании атрибута background-image. Регламентирует, каким образом будет повторяться изображение. Можно указывать 2 значения: для горизонтали и вертикали. Существуют такие характеристики: no-repeat, repeat, repeat-x, repeat-y, inherit, space
background-color	Устанавливает цвет заднего плана из палитры. Цвет наследника всегда совпадает с цветом элемента-предка.
inherit	Наследует все характеристики родительского элемента

Универсальное свойство background

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

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

Свойство background имеет следующий синтаксис:

background: "color image position/size repeat origin clip attachment;

Где значения соответствуют вышерассмотренным нами свойствам:

• background-color (color | transparent).
• background-image (url | none).
• background-position (значение).
• background-size (auto | length | cover | contain).
• background-repeat (repeat | repeat-x |repeat-y | no-repeat).
• background-origin (padding-box | border-box | content-box).
• background-clip (border-box | padding-box | content-box).
• background-attachment (scroll | fixed | local).

Давайте рассмотрим пример использования универсального свойства background:

Пример использования универсального свойства background

И так, что мы сделали в этом примере:

• Мы установили для элементов <html> и <body> высоту 100%, убрали внутренние и внешние отступы.
• Для элемента <header> задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение — url(‘cat_g.jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
• Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается — значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

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

Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».

Значения свойства

Значение	Описание
background-color	Определяет цвет фона (HEX, RGB, RGBA, HSL, HSLA, «Предопределённые цвета»).
background-image	Задает одно или несколько фоновых изображений для элемента.
background-position	Задает положение (позицию) фонового изображения.
background-size	Определяет размер фонового изображения/-ий.
background-repeat	Устанавливает, как фоновое изображение будет повторяться.
background-origin	Определяет область позиционирования фонового изображения/-ий.
background-clip	Определяет область рисования фона.
background-attachment	Устанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

background-image – фоновое изображение или градиент

CSS-свойство позволяет в качестве фона устанавливать обычные изображения (например, PNG, SVG, JPG, GIF, WebP) и градиенты. По умолчанию данное свойство имеет значение .

Использовать в качестве фона изображение очень просто. Осуществляется это так:

CSS

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

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

В задать изображение можно также через URI данные:

CSS

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

Пример двухцветного линейного градиента, идущего сверху вниз:

CSS

С указанием угла и нескольких цветов:

CSS

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

CSS

Пример конического градиента:

CSS

Кроме этого в CSS имеются повторяющиеся градиенты (, и ), с помощью них можно например, создавать различные узоры.

CSS

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

CSS

Установка однотонного заднего фона с помощью html

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

Прежде всего, раскроем особенности изменения фона страниц в HTML.  Чтобы установить цветовой оттенок, применяют свойство background-color в стилевом атрибуте style. Таким образом, задать фоновый цвет сайта можно прописав его характеристики в тег <body>. К примеру:

<body style=»background-color: #55D52B»>

<p>Фон сайта #55D52B</p>

</body>

Помимо 16-теричного кода оттенка можно задать цвет фона в виде ключевого слова или RGB. Пример:

<body style=»background-color: rgb(51,255,153)»>

<p>Фон сайта rgb(23,113,44)</p>

</body>

Отметим, что в сравнении с двумя другими вариантами, при установке цвета фона в формате ключевого слова есть несколько ограничений. В html для того, чтобы задать цвет могут применяться только шестнадцать ключей. К примеру, white, red, blue, black, yellow и др. В связи с имеющимися ограничениями мы рекомендуем для установки HTML фона сайта применять16-теричного кода или RGB.

Вы сумеете не только установить цвет фона, но и сделать еще ряд настроек.

A word on colour schemes

Avoid a shocking colour scheme at all costs. It is no coincidence that the best sites have subdued, light colours, and the worst sites have brash, painful ones. Luminous yellows, reds, pinks and greens are just a big no-no. The more easy it is to read, the more professional it will look. Keep the contrast high between s and colours, so no text disappears because it is too close in shade.

If you think people might want to print parts of your site out, don’t use a black background and white text. No one will print it if it takes up all their ink. It is also not as easy to read as the normal black on white.

The colour-scheme you use and the subject of your site will often have a lot in common. They will also create a different mood. Visit sites like your own and see which colours they use, and criticise whether they work or not. A site about say, the game Quake, can get away with dark, foreboding colours because they fit in well with the atmosphere of the subject. However, if you were designing a tourism site the same colours couldn’t be used because you want to generate a happy, welcoming mood. Think about your audience.

Pick your background well

If you do use a (remember, you don’t have to), pick out the main colour in the image. Then set that colour as your . The reason for this is that some people don’t have images turned on, and won’t see your image. Therefore, the colour has to be close to the images colour so the text remains readable.

Try and avoid using those God-awful free background tiles you can find on the net, or those painfully dull ones that come with Microsoft Office programs. Your site will look horribly cheap. Clever use of a simple background tile can work wonders on the visual impact of your site. Look at our own simplistic bubbles to see what I mean.

Keep Learning //   Basic Web Design → Go! Go!

Other My First Site Articles //   
My First Page ·
Basic Formatting ·
Basic Links ·
Basic Images ·
<body> Attributes ·
Basic Web Design ·
HTML Tag Reference ·
Uploading your Site ·

What’s Related //   
CSS and Spacing ·
CSS and Backgrounds  

Homepage · Full Index · Section Index

CSS Syntax

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Note: If one of the properties in the shorthand declaration is the bg-size property,
you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px;
will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.

Note: If using multiple background-image sources but also
want a background-color, the background-color parameter needs to be last in the
list.