4 Підходу до створення фону html сторінки

Старе добре властивість CSS - background є основним елементом, за допомогою якого ми можемо управляти фоном при створенні дизайну сайту.

В даному уроці ми розберемо 4 найбільш поширених підходу до створення фону HTML сторінки.

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

1. Однотонний колір фону HTML сторінки.

Це найпростіший спосіб поставити фон HTML сторінці, за допомогою тега BODY. В даному випадку для створення фону не використовується ніяких зображень, колір фону задається за допомогою значення: # a1bad1.

2. Горизонтально і вертикально повторюване зображення в якості фону сторінки.

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

Тут необхідно правильно зробити зображення, яке буде використовуватися в якості фону. Зображення потрібно вирізати так щоб в місцях дотику одного зображення до іншого не було видно шва. Інакше в місцях дотику зображень ви побачите потворні лінії, які буду псувати весь фон.

Незважаючи на те, що в якості фону використовується фонове зображення, все одно встановіть HTML колір фону веб сторінки, таким чином, як ми це робили в першому прикладі. Це забезпечить фон, якщо у відвідувача, який зайшов на сайт, в браузері будуть відключені зображення.

3. Фонове зображення повторюється по горизонталі.

Фонове зображення в CSS може повторюватися тільки по осі X або тільки по осі Y. Значення repeat-x зазвичай використовується, щоб додати градієнт до різних елементів, особливо часто застосовується для елементів, які використовуються в якості кнопки. Зображення градієнта, вирізане тонкою смужкою, може використовуватися в якості фонового зображення, яке повторюється по горизонталі на всю сторінку.

Типове значення розташовуватися у верхній частині сторінки, але значення center або bottom так само можуть використовуватися. Колір фону сторінки повинен бути встановлений таким як останній колір зображення градієнта. Це забезпечить плавний перехід, від градієнта в тому місці сторінки, де зображення, що використовується в якості фону, закінчується і починається колір фону сторінки.

4. Велика картинка в якості фону сторінки.

Файли зображень використовуються для створення подібного фону повинні бути невеликими за розміром. Хоча розмір файлу великого фонового зображення буде вище, ніж маленьких повторюваних зображень, застосувавши до нього стиснення можна значно зменшити розмір зображення. Якими б великими були фонові зображення, при прокручуванні сторінки вони в певний момент закінчуються. Тому необхідно задавати колір фону сторінки, щоб зробити плавні перехід, від фонового зображення до кольору фону. У цьому прикладі використовується велике зображення, яке позиціонується по центру у верхній частині веб-старніцах.