В даному уроці я покажу Вам як за допомогою CSS створити ефект подвійного фонового зображення.
Даний урок був підготовлений американським блогером www.SohTanaka.com. Оригінал знаходиться тут.
Зазвичай при створенні розтягуваного фонового зображення за допомогою CSS, нам необхідно взяти картинку фонового зображення фіксованого розміру і повторити її Х раз до заповнення всієї сторінки по горизонталі. Звичайно, для досягнення ідеального результату шапка сайту повинна зливатися з фоновим зображенням з двох сторін.
Типова техніка розтягування
Ця частина зображення буде повторюватися до повного заповнення сторінки.
У нашому ж прикладі нам знадобиться фонове зображення, яке буде повторюватися і зліва, і справа шапки. Як же досягти цього?
Техніка подвійного фонового зображення
Нам необхідно повторити обидва малюнка (зліва і справа) для досягнення такого ефекту.
На жаль, поточна версія CSS не здатна впоратися з подвійними фоновими зображеннями. Сподіваюся, що в майбутньому це зміниться.
Ефект подвійного фонового зображення
Рішення полягає в використанні 2-х зображень, які повторюються (одне для правого боку і одне для лівої).
Для повторюваного зображення зліва ми додамо фоновий малюнок до тегу
. Далі для вирішення проблеми з правою стороною ми додамо додатковий шарbody <>
Тут ми задаємо фон для лівого боку
#bg_wrap <>
Далі ми створюємо другу половину, додаючи абсолютну позицію, яка буде прикріплена праворуч
.container
Цей клас буде контейнером всього змісту. Тут ми визначаємо ширину, колір фону, вирівнювання по центру і позицію 'relative'.
Ось і все готово! Успіхів!
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!