Как спроектировать фон в CSS3

Как спроектировать фон в CSS3

Большинство страниц, на которые вы смотрите, имеют какой-то фон. Следующая процедура показывает, как добавить фон с помощью CSS3, который можно использовать, чтобы сделать вашу веб-страницу более привлекательной для посетителя.

  1. Создайте External CSS.HTML и External CSS.CSS файлы и скопируйте их в новую папку.
  2. Создайте или получите фоновое изображение в формате Joint Photographic Experts Group (JPEG) и назовите его фоновым.JPG.
  3. Откройте External CSS.CSS.
  4. Введите следующий код после существующих стилей и сохраните изменения на диске.

——————————————————————————————————————————————

body
{
 background-image: url("Background.JPG");
 background-size: 100%;
 background-repeat: no-repeat;
}
------------------------------------------------------------------

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

Отправной точкой для большинства фонов является свойство background-image, в котором можно указать изображение, которое вы хотите использовать с помощью метода url (). Можно добавить несколько изображений в фоновом режиме. Если вы сделаете это, браузер объединит изображения в одну презентацию.

Использование свойства background-size определяет размер изображения, отображаемого на экране. Пример-это большое изображение, поэтому вы хотите, чтобы оно занимало всю область отображения. Использование 100% в качестве значения означает, что изображение автоматически изменяется, чтобы занять всю клиентскую область.

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

  • 5. Перезагрузите тестовую страницу.

Вы видите эффект от изменения стиля.

  • 6. Измените размер окна браузера.

Вы видите, что фоновое изображение автоматически изменяется, чтобы занять всю область отображения.

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями: