Як зробити фон картинкою
Відео: Уроки по 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
- Як зробити відео в якості фону сайту на html5. (1/2).
- Як зробити відео в якості фону сайту на html5. (2/2).
- Як міняти картинку при наведенні курсору миші
- Як зробити затемнення фону через css
- Як зробити тінь на css
- Як зробити анімований фон на сторінці
- Як зробити красиве текстове поле
- Як вставити підпис, печатка в excel.
- Як зробити div зі 100% height
- Що таке css спрайт?
- Як задавати градієнти в css3.
- Як зробити блоки зі слайдер ефектом на чистому css3.
- Як зробити ефект вдавленого тексту на css3.
- Як зробити індикатор прокрутки на css3.
- Множинні фони в css3.
- Закруглені кути через css
- Скрипт галереї + слайд-шоу на jаvascript
- Закруглені кути на css3.
- Проста галерея на php
- Властивість css3 - box-sizing.
- Списки html