<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Множественные фоны в CSS3.

Множественные фоны в CSS3.

Всем привет! В этой небольшой статье мы с вами разберём, как задать несколько фоновых изображений на CSS3.

HTML у нас снова такой же

<html>
<head>
  <title>multibackgrounds</title>
  <meta charset="utf-8">
<body>
  <div class="block"></div>
</body>
</html>

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

.block {
  width: 700px;
  height: 400px;
  border: 3px solid #999;
  margin: 20px;

  background-image: url(img1.jpg);
  background-repeat: no-repeat;
  background-position: bottom center;
}

В background-image мы указываем путь к картинке, в background-repeat - повторять или не повторять картинку, а в background-position мы указываем позицию картинки в блоке: первое значение по горизонтали, второе по вертикали. Значения так же можно задавать в px.

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

.block {
  /* ... */
  background-color: #ccc;
  background-image: url(img1.jpg);
  background-repeat: no-repeat;
  background-position: bottom center;
}

Ещё одно полезное свойство background-attachment, которое позволяет зафиксировать фон в одной позиции независимо от того, как двигается блок.

/* ... */
background-attachment: fixed;

background-size позволяет изменять размер картинки.

background-size: 50px 200px;

Первое значение по горизонтали, второе по вертикали.

Также данное свойство может иметь текстовые значения: contain и cover. Установив первое значение, картинка отмасштабируется таким образом, чтобы она содержалась полностью в нашем блоке, а при втором значении картинка заполнит весь контейнер, и, если места не хватит, то будет обрезана.

Итак, мы разобрали все основы фоновых изображений и теперь поговорим про множественные фоны.

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

background-image: url(img1.png), url(img2.png);

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

background-repeat: no-repeat, repeat;
background-position: left bottom, right center;

Так же обратите внимание на то, что первая картинка в background-image будет отображаться выше второй, вторая выше третей и т.д.

В конце следует сказать, что все эти свойства можно объединять в одно свойство background.

background: url(img1.png) left bottom no-repeat, url(img2.png) right center repeat;

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (3):

alexbal2050 alexbal2050 16.04.2014 16:18:04

Я так понял, что на сайте новый редактор?

Ответить

mike124 mike124 16.04.2014 20:42:27

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

Ответить

php_programmer php_programmer 16.04.2014 22:07:04

Спасибо за замечание! Оно обязательно будет учтено.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.