Фон для сайту css – як його зробити

16

Від автора: фоновий колір або зображення можуть визначати перше враження від сайту. Правильно підібраний фон, не заважає сприйняттю інформації на сторінці, може поліпшити поведінкові фактори. Сьогодні я хотів би показати, як задавати фон для сайту в css, а також для будь-якого елемента на веб-сторінці.

Основний фон сайту

Під основним я розумію той, який задається всього сайту в цілому, тобто селектору body, або головному контейнера, вмещающему в себе всі блоки нашого інтернет-проекту.

В WordPress ви можете змінювати цей фон дуже легко у візуальному режимі. Для цього досить вибрати пункт «Зовнішній вигляд», а в ньому вже вибрати «Фон» або «Налаштувати». В якості фону можна вибрати суцільний колір, а можна завантажити зображення. Але ця стаття про те, як все це працює в css, де і прописується це властивість.

Основні властивості фону в css

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

селектор{
background-color: колір;
}

В якості селектора можна вибирати будь-який потрібний елемент, в тому числі і всю сторінку (body). Тепер слід розібратися з іншим питанням: як записати колір? Можливо, ви це знаєте, але я все ж таки нагадаю кілька варіантів:

з допомогою ключових слів: white, blue, red, green.

за допомогою hex-коду. Це так звана шістнадцятковий запис. Наприклад: #ccc; #333333; #ededed. Ставиться решітка і після неї записується 3 або 6 символів, які і визначають колір. Є багато програм, де при виборі кольору ви можете подивитися його hex-код. Наприклад, фотошоп.

за допомогою rgb формату. На цьому зупинимося, тому що я хотів сказати ще про багато іншого в цій статті. Rgb (red, green, blue) де записуються насиченість цих квітів від 0 до 255. Так можна отримати мільйони комбінацій.

Як встановити фонове зображення?

Для цього використовується властивість background-image, а в ньому задається шлях до картинки, яка перед цим повинна бути поміщена у відповідну папку. Наприклад:

селектор{
background-image: url(image.jpg);
}

Головне, не забути поставити слово url, а потім в круглих дужках правильно записати шлях. В якості фону зазвичай задають jpg або png зображення. В останньому випадку наша картинка може бути прозорою, що дає певні можливості в оформленні сайту. Якщо ж вам потрібно квадратне зображення, то набагато правильніше буде використовувати його у форматі jpg.

Як розтягнути фон в css і прибрати його повторення

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

background-repeat: no-repeat;

Інший корисний і важливий трюк – розтягування фону на всю сторінку або на весь блок. Справа в тому, що розміри екранів у всіх користувачів різні, тому на одному дозволі ваша картинка може ідеально вписуватися в потрібний контейнер, а на іншому буде видно порожній простір.

Як перестрахуватися і виправити це? Якщо ви використовуєте так звані повторювані безшовні орнаменти, то вам боятися нічого – досить не записувати для такої картинки скасування повторення і вона сама при необхідності розтягнеться на змінені розміри сторінки.

Але що робити, якщо у вас звичайне зображення? Рішення є – background-size, відносно нове властивість, і його значення cover. Я покажу все на прикладі. Є блок шириною 300 пікселів і висотою 200 і йому задана фонова картинка. (красива)

Фон для сайту css – як його зробити

Але що станеться, якщо ми збільшимо розміри блоку? Зображення не буде розтягуватися, якщо це додатково не поставити. Буде так:

Фон для сайту css – як його зробити

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

Дописати властивість background-size: cover. Таким чином, зображення масштабується так, щоб повністю заповнити простір блоку. При цьому його пропорції не змінюються.

Фон для сайту css – як його зробити

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

background-size: 100% 100%;

Ця запис дає команду розтягувати картинку на 100% по горизонталі і вертикалі. Врахуйте, що в цьому випадку пропорції можуть порушуватися. Якщо вам потрібно в css розтягнути фон по ширині або тільки по висоті, то можна записати так:

background-size: contain;

Буде розтягнуто на 100% сторінки або блоку, але тільки по одній стороні (по ширині або висоті, в залежності від розмірів.)

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

Значення background-size ви також можете задавати в пікселях, коли потрібно точно визначити його величину. Наприклад, це може бути корисно, якщо ви визначаєте розмір повторюваного орнаменту чи використовуєте повторюваний лінійний градієнт.

Трюк з повторенням

Якщо ви використовуєте повторення картинки, то вона заповнить весь простір свого контейнера, при цьому деякі її повторення можуть потрапити в елемент не повністю.

Фон для сайту css – як його зробити

Щоб залишити в блоці тільки повні копії картинки, можна зробити двома способами:

Встановити розмір контейнера або самого зображення так, щоб при повторенні вона повністю влазила в свій контейнер.

Задати background-repeat: round і тепер зображення буде вести себе так: воно буде повторюватися, але при цьому копії цілком помістяться в блок. При цьому в них можуть трохи змінюватися розміри.

Задати background-repeat: space. Це ще одне нове значення з CSS3. Якщо задано, то розміри фонової картинки не будуть змінюватися, але між її копіями можуть утворюватися порожні простору. Браузер сам вирахує їх так, щоб в блок помістилися тільки цілі картинки.

Отже, ми з вами розглянули деякі властивості, які дозволяють керувати фоном в css, причому деякі з них з’явилися зовсім недавно. Додаткову інформацію ви можете знайти в курсі по css для початківців, я ж на цьому закінчую сьогоднішню статтю. Підписуйтесь на наш блог, якщо вас цікавить сайтостроение.