Домой / Учебник Css / 5 Урок. Фон в css

5 Урок. Фон в css

В css можно задать фон любому элементу. Также можно сделать фон картинкой.

 

Свойства для фона в css

Существует несколько свойств, с помощью которых можно сделать необходимый фон.

  • background-color - задаёт цвет фона;
  • background-image - задаёт картинку фона;
  • background-repeat - определяет, будет ли повторяться фоновая картинка;
  • background-position - определяет позицию фонового изображения;
  • background-attachment - определяет, будет ли изображение скроллиться.

Цвет фона - background-color

 

Фону можно задавать стили как для всей страницы, так и для отдельных элементов. Сперва посмотрим, как работать с фоном для всей страницы. Для этого свойства в css будем прописывать к элементу <body>.

Html часть:

<HTML>
  <head>
    <title>Моя страница</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    Лев и медведь добыли мясо и стали за него драться. Медведь не хотел уступить, и лев не уступал. Они так долго бились, что ослабели оба и легли. Лисица увидала их мясо, подхватила его и убежала.
  </body>
</HTML>

Css часть:

body {background-color: orange;}

Результат:

Цвет фона css
Цвет фона css

Как видим, фон стал оранжевый. Таким образом можно задать любой цвет.

Фон картинкой - background-image

Сохраните эту картинку к себе, мы будем с ней работать (пкм - сохранить картинку как) и назовите ее fon.jpg (если она как-то по-другому будет называться):

 

 

Теперь попробуем вставить эту картинку в фон страницы.

Css часть:

body {background-image: url(fon.jpg);}

Пишется url, затем БЕЗ ПРОБЕЛОВ в скобках адрес картинки.

Результат:

Фон картинка в css
Фон картинка в css

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

Повторение картинки background-repeat

Это свойство используется только если к фону задана картинка.

Значения свойства background-repeat:

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

Посмотрим пример:

body
 {background-image: url(fon.jpg);
 background-repeat: repeat-x;
 }

Результат:

Дублирование картинки по горизонтали
Дублирование картинки по горизонтали

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

Позиция фоновой картинки - background-position

background-position задает позицию для фоновой картинки. По умолчанию картинка находится слева (в том случае, если он не дублируется). Актуально только в том случае, если запретить дублирование картинки свойством background-repeat: no-repeat, или дублировать картинку только по x или y. Если же она будет заполнять весь фон, тогда изменений мы не увидим.

Имеет значения:

  • left - слева (по умолчанию);
  • right: - справа;
  • top - сверху;
  • bottom - снизу.

Можно также задать два значения, например, справа вверху (right top), слева внизу (left bottom) и т. д.

Пример:

body {background-image: url(fon.jpg);
background-repeat: no-repeat;
background-position: right top;
}

В примере мы задали положение картинки справа вверху. Вот что получим:

Фоновая картинка справа вверху
Фоновая картинка справа вверху

Скроллинг картинки - background-attachment

Свойство имеет несколько значений:

  • scroll - фоновое изображение прокручивается вместе с содержимым;
  • fixed - изображение не прокручивается, а остается на месте.

Сокращение кода

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

Была такая запись:

body {
background-color: orange;
background-image: url(fon.jpg);
background-repeat: no-repeat
background-position: right top;
}

Стала такая:

body {
background: orange url(fon.jpg) no-repeat right top;
}

Результат один и тот же:

Сокращение кода css background

Мы написали значения к разным свойствам фона, но при этом не указывали все свойства, а просто написали свойство background. А css сам определил, значение к какому именно свойству мы указали.

Задаем фон отдельному элементу

Чтобы задать фон отдельному элементу, ничего нового делать не потребуется. Достаточно в css указать этот элемент. Попробуем задать фон для параграфа.

Html часть:

<HTML>
  <head>
    <title>Моя страница</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>Этот параграф мы оставим без изменений</p>
    <p class="xxx"> А этому зададим класс и пропишем стили</p>
  </body>
</HTML>

Css часть:

p.xxx {
background-color: orange;
}

И фон применится только к параграфу с классом xxx (Селектор класса и id в css). Таким же образом можно работать и с фоновой картинкой.

Добавить комментарий

Ваш адрес email не будет опубликован.