Большинство страниц, на которые вы смотрите, имеют какой-то фон. Следующая процедура показывает, как добавить фон с помощью CSS3, который можно использовать, чтобы сделать вашу веб-страницу более привлекательной для посетителя.
- Создайте External CSS.HTML и External CSS.CSS файлы и скопируйте их в новую папку.
- Создайте или получите фоновое изображение в формате Joint Photographic Experts Group (JPEG) и назовите его фоновым.JPG.
- Откройте External CSS.CSS.
- Введите следующий код после существующих стилей и сохраните изменения на диске.
——————————————————————————————————————————————
body { background-image: url("Background.JPG"); background-size: 100%; background-repeat: no-repeat; } ------------------------------------------------------------------
Наиболее распространенное место для бронирования фоновых изображений находится в <body>. Однако ничто не мешает вам использовать фон в других объектах и различными другими способами.
Отправной точкой для большинства фонов является свойство background-image, в котором можно указать изображение, которое вы хотите использовать с помощью метода url (). Можно добавить несколько изображений в фоновом режиме. Если вы сделаете это, браузер объединит изображения в одну презентацию.
Использование свойства background-size определяет размер изображения, отображаемого на экране. Пример-это большое изображение, поэтому вы хотите, чтобы оно занимало всю область отображения. Использование 100% в качестве значения означает, что изображение автоматически изменяется, чтобы занять всю клиентскую область.
Свойство background-repeat используется для определения того, повторяется ли изображение в фоновом режиме. Обычно небольшие изображения повторяются, поэтому они занимают всю область отображения. Повторение большого изображения, как правило, делает фон запутанным и отвлекает от общего внешнего вида дисплея.
- 5. Перезагрузите тестовую страницу.
Вы видите эффект от изменения стиля.
- 6. Измените размер окна браузера.
Вы видите, что фоновое изображение автоматически изменяется, чтобы занять всю область отображения.