Підручник з розміру фонового зображення CSS - Як кодувати фонове зображення повної сторінки

Цей підручник покаже вам простий спосіб кодування фонового зображення на повній сторінці за допомогою 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