Фонові зображення в CSS

Застосувати фонове зображення нескладно. Припустимо, на сторінці повинно бути розміщено естетично привабливе повторюване фонове зображення. Для вирішення цього завдання можна просто задати зображення в якості фону елемента "body".
body{ background: url( bg.gif ) }

За замовчуванням браузер повторить фонове зображення по вертикалі і горизонталі, таким чином, щоб воно заповнило всю сторінку. Крім того, дизайнер може задати, як має повторюватися фонове зображення: тільки по вертикалі, тільки по горизонталі або не повторюватися взагалі.

В даний час все більш модними стають градієнти. Для додавання на сторінку вертикального градієнтного фону потрібно створити високе вузьке градієнтне зображення, застосувати його до дескриптора "body" і задати його повторення по горизонталі.
body{ background: #ccc url( gradient.gif ) repeat-x }

Оскільки градієнтне зображення має фіксовану висоту, воно може раптово обірватися, якщо вміст сторінки довший, ніж висота зображення. Для вирішення цієї проблеми можна створити довге зображення, проте часто важко передбачити, наскільки довгою буде сторінка. Щоб обрив зображення не був занадто помітним, можна додати кольоровий фон. Градієнтне зображення завжди виводиться поверх кольорового фону. Коли зображення закінчиться, почне виводитися кольоровий фон. Якщо підібрати колір фону який збігається з кольором нижньої кромки градієнтного зображення, перехід між зображенням і фоном буде непомітним.

Повторювані зображення корисні у багатьох ситуаціях. Однак найчастіше на Web-сторінках використовуються неповторювані зображення, наприклад, якщо сторінка починається з великого яскравого логотипу компанії. Для цього потрібно всього лише додати зображення безпосередньо на сторінку. У багатьох ситуаціях таке рішення є оптимальним. Однак, якщо знімок не передає жодної інформації, будучи чисто презентаційним елементом, його рекомендується відокремити від вмісту. Це можна зробити, створивши для зображення "зачіпку" в коді HTML, а потім застосувати зображення за допомогою таблиці CSS. У наведеному нижче прикладі для цього використаний порожній дескриптор "div", що має ідентифікатор "brand". Потім можна встановити розміри елемента "div" рівними розмірам зображення "brand", застосувати фон і скасувати повторення.
#brand{ width: 700рх; height: 200рх; background: url( brand.gif ) no-repeat }

Фонове зображення можна позиціонувати. Припустимо, потрібно додати маркери до кожного заголовку сайту. Це можна зробити наступним чином:
h1{ padding-left: 30px; background: url( bullet.png ) no-repeat left center }


Ключові слова "left" і "center" задають позиціонування зображення: воно буде розміщене ліворуч від елемента і центровано по вертикалі. Позиціонувати зображення можна не тільки за допомогою ключових слів, а й задавши значення в пікселях або відсотках.

Якщо позиціонувати фонове зображення в пікселях, його лівий верхній кут розміщується відносно лівого верхнього кута елемента. Наприклад, якщо привласнити вертикальній і горизонтальній позиціям значення 20рх, лівий верхній кут зображення буде зміщений на 20 пікселів вниз і вправо відносно лівого верхнього кута елемента.

Позиціонування фонового зображення у відсотках виконується трохи інакше. У цьому випадку для позиціонування застосовується не лівий верхній кут зображення, а задана точка на зображенні. Наприклад, якщо задати вертикальну і горизонтальну позиції рівними 20%, точка на зображенні, розташована на 20% зліва і зверху, буде поєднана з точкою елемента, теж розташованої на 20% зліва і зверху від кута елементу.

Щоб центрувати зображення маркера по вертикалі, необхідно задати вертикальну позицію 50%:
h1{ padding-left: 30px; background: url( bullet.gif ) no-repeat 0 50% }

Специфікація CSS не передбачає можливості змішування пікселів або відсотків з ключовими словами. Це правило виглядає досить безглуздо, і багато сучасних браузерів навмисне ігнорують його. Однак робити так не рекомендується, оскільки в деяких браузерах сторінка зі змішуванням одиниць з ключовими словами вважається недійсною.
Залишати коментар дозволено лише зареєстрованим користувачам. Процедура займе зовсім небагато часу, і ви зможете швидко добавити відгук.

Авторизуватися

Вперше на KovelPost? Приєднуйтесь

Статистика: