FrontendBook - Фоновое изображение HTML: как добавить обои на свой сайт

Фоновое изображение HTML — как добавить обои на свой сайт

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

В этой статье вы узнаете:

  • Как добавить фоновое изображение на свой сайт с помощью background-image свойства CSS.
  • Другие свойства фона CSS для изображений.

Как добавить обои на свой сайт

При кодировании веб-сайта использование изображения в качестве фонового изображения веб-сайта отличается от вставки изображения в HTML с помощью img элемента.

Чтобы использовать изображение в качестве фона вашего веб-сайта, вы будете использовать CSS.

Вот пример:


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Background Image</title>
    <style>
        h1{
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Background image</h1>
</body>
</html>

У нас есть два блока кода выше: код HTML отображает текст с надписью «Фоновое изображение» на веб-странице, а код CSS центрирует текст на странице.

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


body{
    background-image: url('https://frontendbook.ru/assets/images/html_article_2_repeat.png');
}

В приведенном выше коде мы используем это background-image свойство, чтобы добавить изображение в тело веб-страницы. Путь/местоположение изображения передается в качестве параметра url() функции: url('https://frontendbook.ru/assets/images/bg-image.jpg')

Что делать, если фоновое изображение меньше окна браузера?

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

Это повторение не подходит для каждой картинки. Вот как выглядит в браузере уменьшенная версия изображения, использованного в предыдущем разделе:

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

Вот как решить проблему повторения изображения: 


body{
    background-image: url('https://frontendbook.ru/assets/images/html_article_2_repeat.png');
    background-repeat: no-repeat;
}

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

Изображение больше не повторяется на странице, но у нас появилась новая проблема — изображение больше не занимает всю страницу.

Чтобы исправить это, мы используем свойства background-size и: background-attachment


body{
    background-image: url('https://frontendbook.ru/assets/images/html_articles_2_small-image.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

Установка значения background-size свойства на cover заставляет изображение покрывать весь элемент ( body в нашем случае / всю страницу).

Со fixed значением background-attachment свойства положение изображения фиксируется. Таким образом, он остается в том же положении, даже когда вы прокручиваете страницу.

Вот изображение сейчас:

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

Подведение итогов

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