Як зробити фон картинкою

Відео: Уроки по CSS / CSS3. Частина 10. Фон і множинні фони

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

існує 3 основні варіанти фону: градієнт по горизонталі, градієнт по вертикалі і звичайне зображення.

Відео: як встановити фон на сайт

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

body { 
 background: url("Images / bg.jpg") repeat-x # dedede- 
}

Таким чином, ця смужка розмножиться по всій ширині екрану і вийде градієнтний фон. Можливо, Ви зараз запитаєте: "А що буде, якщо висота буде більше 800 пікселів?". Ось для цього ми і задали"#dedede"- той колір, де вже немає зазначеного фонового зображення. Безумовно, у Вас буде інше значення, яке відповідає самому останньому кольором в градієнті. Таким чином, вийде, що спочатку йде градієнт, а вже потім однотонний колір, і ніяких ривків не відбувається.

Абсолютно аналогічний принцип і з градієнтом по вертикалі, тільки потрібно вже вирізати картинку висотою в 1 піксель, а також необхідно центрувати сам фон по центру:

body { 
 background: url("Images / bg.jpg") repeat-y center # dedede- 
}

Іноді, центрування не потрібно.

І наостанок, як зробити фон у вигляді звичайної картинки. Тут треба розуміти один дуже важливий момент. Картинка не змінює свої розміри в CSS. Тому не вийде зробити гумову верстку там, де знаходиться картинка в тлі, іншими словами, картинка не буде розтягуватися. А задається вона аналогічно:

body { 
 background: url("Images / bg.jpg")no-repeat # dedede- 
}

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

Я показав Вам, як зробити фон картинкою. Безумовно, є різні особливі випадки, де потрібно вже думати самостійно, а найосновніші і популярні варіанти, Ви тепер вже знаєте.

Повний курс по HTML, CSS і по верстці сайтів: https://srs.myrusakov.ru/makeup

Поділися в соціальних мережах:

Схожі