Цей підручник покаже вам простий спосіб кодування фонового зображення на повній сторінці за допомогою CSS. І ви також дізнаєтесь, як зробити це зображення адаптивним до розміру екрана ваших користувачів.
Повноцінне розтягування фонового зображення, щоб воно охоплювало весь область перегляду браузера, є загальним завданням у веб-дизайні. На щастя, із цим завданням можна подбати за допомогою декількох рядків CSS.
Покрийте віконце із зображенням
По-перше, ми хочемо переконатися, що наша сторінка насправді охоплює весь область перегляду:
html { min-height: 100%; }Всередині htmlми будемо використовувати background-imageвластивість для встановлення зображення:
background-image: url(image.jpg); /*replace image.jpg with path to your image*/Магія властивості "Розмір фону"
Магія відбувається з background-sizeвластивістю:
background-size: cover;coverвказує браузеру переконатися, що зображення завжди охоплює весь контейнер, у цьому випадку html. Браузер покриє контейнер, навіть якщо йому доведеться розтягнути зображення або трохи відрізати краї.
Оскільки браузер може розтягнути зображення, слід використовувати фонове зображення з достатньо високою роздільною здатністю. Інакше зображення може виглядати нерівним.
Якщо ви дбаєте про те, щоб усе зображення відображалось у фоновому режимі, то вам слід переконатися, що зображення має відносно близьке співвідношення сторін порівняно з розміром екрана.
Як точно налаштувати положення зображення та уникнути плитки
Браузер може також вибрати відображення фонового зображення у вигляді плиток залежно від його розміру. Щоб цього не сталося, використовуйте no-repeat:
background-repeat: no-repeat;Щоб все було красиво, ми завжди зберігатимемо свій образ в центрі:
background-position: center center;Це завжди буде центрувати зображення як горизонтально, так і вертикально.
Зараз ми створили повністю чуйне зображення, яке завжди буде охоплювати весь фон:
html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } Як зафіксувати зображення на місці під час прокрутки
Тепер, на випадок, якщо ви хочете додати текст поверх фонового зображення, і цей текст переповнює поточний вікно перегляду, ви можете переконатися, що ваше зображення залишається у фоновому режимі, коли користувач прокручує вниз, щоб побачити решту тексту:
background-attachment: fixed;Ви можете включити всі описані вище властивості фону, використовуючи короткі позначення:
background: url(image.jpg) center center cover no-repeat fixed;Необов’язково: Як додати медіа-запит для мобільних пристроїв
Щоб додати трохи глазурі на торт, ви можете додати медіа-запит для менших екранів:
@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } Ви можете використовувати Photoshop або інше програмне забезпечення для редагування зображень, щоб зменшити розмір оригінального зображення, щоб покращити швидкість завантаження сторінки в мобільному Інтернеті.
Отже, тепер, коли ви знаєте магію створення чуйного, повноцінного фонового зображення, настав час спробувати створювати кілька красивих веб-сайтів!
Хочете побачити більше порад та знань щодо веб-розробки?
- Підпишіться на мій щотижневий бюлетень
- Відвідайте мій блог на 1000 Mile World
- Слідуйте за мною у Twitter