Як зробити фон в html?

Як зробити фон в html?
Дуже часто сторінки сайту роблять з фоном у вигляді картинки.

І я регулярно отримую запитання про те, як це зробити. Оскільки відповісти одним словом тут не вийде (новачки не зрозуміють, а досвідчені і так це знають), я і вирішив розповісти в цій статті, як зробити фон картинкою. Існує 3 основних варіанти фону: градієнт по горизонталі, градієнт по вертикалі і звичайне зображення.

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

Щоб зробити такий градієнтний фон, необхідно в CSS background: url («images / bg. Jpg») repeat-x # dedede; Таким чином, ця смужка розмножиться по всій ширині екрану і вийде градієнтний фон. Можливо, Ви зараз запитаєте: »А що буде, якщо висота буде більше 800 пікселів? «. Ось для цього ми і задали »# dedede» — той колір, де вже немає зазначеного фонового зображення. Безумовно, у Вас буде інше значення, яке відповідає самому останньому кольором в градієнті. Таким чином, вийде, що спочатку йде градієнт, а вже потім однотонний колір, і ніяких ривків не відбувається.

Абсолютно аналогічний принцип і з градієнтом по вертикалі, тільки потрібно вже вирізати картинку висотою в 1 піксель, а також необхідно центрувати сам фон по центру: background: url («images / bg. Jpg») repeat-y center # dedede; Іноді, центрування не потрібно. І, нарешті, як зробити фон у вигляді звичайної картинки. Тут треба розуміти один дуже важливий момент. Картинка не змінює свої розміри в CSS.

Тому не вийде зробити гумову верстку там, де знаходиться картинка в тлі, іншими словами, картинка не буде розтягуватися. А задається вона аналогічно: background: url («images / bg. Jpg») no-repeat # dedede; Колір поза зображення треба задавати таким, щоб був плавний перехід від кордонів картинки до цього кольору. Я показав Вам, як зробити фон картинкою. Безумовно, є різні особливі випадки, де потрібно вже думати самостійно, а самі основні і популярні варіанти, Ви тепер вже знаєте.

Повний курс по HTML, CSS і по верстці сайтів:.

Як зробити фон в html?

Сподобалася стаття? Поділися нею з друзями!




Добавить комментарий