Вернуться ко всем статьям
Создание фона на HTML странице
Не всегда на своём сайте хочется видеть скучный белый фон «как у всех». Рассмотрим, как сделать фон в HTML.
Есть три метода изменения фона на HTML сайте:
- одноцветная заливка;
- вставка изображения;
- вставка текстуры.
Для выполнения однотонной заливки фона применяется атрибут style, который указывается внутри открывающего тега <body>. К атрибуту применяем свойство background-color. Его значения поддерживаются в виде шестнадцатеричного кода, слова или значения RGB. Рассмотрим все три варианта указания красного цвета в свойстве: background-color:
1.<body style="background-color: rgb(255,0,0)">
<p>Применение RGB кода</p>
</body>
2. <body style="background-color: #FF0000">
<p>Применение шестнадцатеричного кода</p>
</body>
3. <body style="background-color: Red">
<p>Применение ключевого слова</p>
</body>
Установка фонового рисунка при помощи гипертекста.
Для установки фонового рисунка при помощи гипертекста. будем использовать свойство backgroun-image. Изображение привязывается к коду страницы через путь url, который необходимо задать в скобках.
Возможно, что размер картинки окажется слишком маленьким для заполнения всего экрана. Если маленькую картинку оставить без применения дополнительных свойств, браузер по умолчанию замостит свободное место на экране этим же изображением. Для предотвращения дублирования фонового изображения примените свойство background-repeat с одним из его возможных значений:
1. repeat – клонирование изображения по двум осям;
2. repeat-x – дублирует по оси x;
3. repeat-y – дублирует по оси y;
4. no-repeat – запрещает повтор.
Также возможно изменить местоположение фоновой картинки на экране, применив свойство тега background-position. Данное свойство имеет несколько способов указания координат:
- Использование ключей (center - центрирование, top - расположение сверху, left - слева, right - справа, bottom - снизу);
- Указание отступа в процентах (от левого верхнего угла экрана);
- В пикселях.
Иногда бывает необходимо зафиксировать фон при прокрутке. Для этого примените свойство background-attachment, применяющее значение scroll либо fixed.
В итоге, чтобы фон не дублировался, находился по центру экрана и оставался статичным при прокручивании используйте следующий код:
<body style="background-image: url(адрес_расположения_файла/имя_файла.расширение); background-repeat: no-repeat; background-position: top center; background-attachment: fixed">
</body>
Для использования текстуры в качестве фонового изображения применяйте тот же метод, что и для вставки обычного изображения, оставив возможность браузеру замостить экран изображением текстурой.
