Як робити графічний фон на web (html) сторінці і інших об’єктах - верстка html
Вчимося створювати першу свою WEB сторінку
Вставимо в файл other.html в якості фону WEB сторінки начерк winner.jpg, який ми зберегли в папці WEB в минулому досвіді.
Додайте в кінець відкриваючого тега
стиль background-image: url ( 'winner.jpg'); так, щоб тег прийняв такий вигляд:У вікні браузера ви побачите, що зараз фон цієї сторінки не однотонний блакитний, як до цього, а зображення з завантаженою нами фото, записаної в файлі winner.jpg. І на цьому новому тлі відображається текст документа і начерк image.gif. Але нагадаємо, що ми не видалили атрибут bgcolor в тезі
. У таких випадках, коли в тезі вказуються обидва атрибути - bgcolor і background - браузер зазвичай дає перевагу атрибуту background, але, якщо зображення фону завантажити нереально, вживається атрибут bgcolor.Фон на WEB сторінці через CSS
Ще один спосіб визначення фону - за допомогою мови каскадних таблиць стилів CSS. Як ви на даний момент побачите, цей метод надає розробнику WEB сторінки істотно більші можливості управління фоновим зображенням. Щоб зручніше було знайомитися з ними, вставимо начерк winner.jpg як фонове зображення другий WEB сторінки нашого WEB сайту, збереженої у файлі list.html, скориставшись мовою каскадних таблиць стилів.
Раніше ми визначили вигляд тексту на першій WEB сторінці за допомогою мови каскадних таблиць стилів, вказавши потрібні стилі як значення атрибута style в тезі <р>. Але є інший, більш бажаний варіант визначення стилів, при якому опис стилів розміщується всередині заголовка WEB документа
... в відкриваючому тезі зобов'язаний мати наступний вигляд:Вставимо цей тег в код HTML файлу list.html.
Вставте порожній рядок у файлі list.html після елемента
елемент HTML повинен виглядати наступним чином:
Збережіть файл list.html і відкрийте його в програмі-браузері. Ви побачите, що встановлений вами раніше кольоровий фон замінений зображенням з файлу winner.jpg і текстове вміст документа відображається зараз на новому тлі.
Якщо текст погано видно на новенькому тлі, змініть його колір за допомогою атрибуту text тега
, наприклад, .Вставте позначене властивість в код HTML файлу list.html так, щоб елемент прийняв такий вигляд:
Розмноження фону на WEB (html) сторінці
Зараз у вікні браузера фоновий малюнок займає лише верхню частину документа. Нижня і, може бути, права частина, в разі високої роздільної здатності монітора, заповнена однотонним фоном, який ви встановили раніше.
Властивість background-repeat може мати також наступні значення:
repeat - фон повторюється як по горизонталі, так і по вертикалі; це значення встановлюється за умовчанням;
repeat-x - фон повторюється тільки по горизонталі;
repeat-у - фон повторюється тільки по вертикалі.
Положення фонового малюнка на сторінці можна поміняти за допомогою характеристики background-position. Як значення цієї властивості вказуються ключові слова, що характеризують стан зображення по вертикалі - top (угорі), center (по центру), bottom (унизу) - і по горизонталі - left (ліворуч), center (по центру), right (праворуч). Першим має зазначатися вертикальне положення. Наприклад, код background-position: center center вирівняє начерк по центру сторінки як по горизонталі, так і по вертикалі.
Додайте в опис параметрів елемента body файлу list.html властивість background-position: center center. елемент в цьому файлі повинен прийняти такий вигляд:
Як зробити фоновий малюнок на WEB сторінці
Фоновий малюнок буде поміщений в центрі сторінки, при цьому нижня і верхня частини сторінки, також права і ліва при вирішенні монітора 1024 x 768 і вище, будуть заповнені суцільним кольором.
Ви зможете, але, фіксувати зображення так, щоб при прокручуванні фон сторінки залишався нерухомим, а текст пересувався щодо фонового зображення. Для цього в елементі body слід використовувати властивість background-attachment із значенням fixed: background-attachment: fixed.
Вставте позначене властивість в опис стилю елемента body. елемент HTML коду файлу list.html повинен прийняти такий вигляд:
Зараз ви побачите, що при прокручуванні сторінки фонове зображення залишається нерухомим, а текст та інші елементи WEB сторінки пересуваються відносно фону.
Річ у тім, впровадження мови каскадних таблиць стилів надає більше можливостей для подання фонового зображення на WEB сторінці, ніж застосування атрибута background в тезі
.Додаткова інформація по темі
Опис, як власними силами вставити перше посилання в текст на web (html) сторінці
Повний і докладний опис графічних форматів використовуваних в Інтернет і що рекомендується в яких випадках використовувати
Опис, як просто і правильно робляться списки значень на web (html) сторінках