Зображення є важливою частиною привабливого дизайну сайту. Це включає використання фонових зображень. Це зображення та графіка, які використовуються за областями сторінки, на відміну від зображень, що представляються як частина сторінок вмісту. Ці фонові зображення можуть додати візуальний інтерес до сторінки і допомогти вам отримати візуальний дизайн, який ви можете шукати на сторінці.
Якщо ви почнете працювати з фоновими зображеннями, ви, безсумнівно, зіткнетеся зі сценарієм, в якому ви хочете, щоб зображення розтягувалося за розміром сторінки. Це особливо актуально для адаптивних веб-сайтів, які доставляються на різні пристрої і розміри екрану.
Це бажання розтягнути фонове зображення є дуже поширеним бажанням для веб-дизайнерів, тому що не кожне зображення вписується в простір веб-сайту. Замість того, щоб встановити фіксований розмір, розтягнення зображення дозволяє йому згинатися, щоб відповідати сторінці незалежно від ширини або ширини вікна переглядача.
Сучасний Шлях
Кращий спосіб розтягнути зображення, щоб воно відповідало фону елемента, - це використовувати властивість CSS3 для background-size і встановити його рівним cover.
div {
background-image: url ('background.jpg');
розмір тла: обкладинка;
повторення тла: без повторення;}
Подивіться на цей приклад у дії. Ось HTML-код на картинці нижче.
Тепер погляньте на CSS. Це не сильно відрізняється від коду вище. Є кілька доповнень, щоб зробити його більш зрозумілим.
Тепер це результат у повноекранному режимі.
Встановивши background-size для cover, ви гарантуєте, що переглядачі автоматично масштабують фонове зображення, навіть велике, щоб охопити всю область HTML-елемента, до якого він застосовується. Подивіться на вужче вікно.
Згідно з caniuse.com, цей підтримується понад дев'яноста відсотками браузерів, що робить його очевидним вибором у більшості ситуацій. Це створює деякі проблеми з браузерами Microsoft, тому може знадобитися запасний варіант
Запасний шлях
Ось приклад, який використовує фонове зображення для тіла сторінки і встановлює розмір на 100%, щоб він завжди розтягувався за розміром екрану. Цей метод не ідеальний, і він може призвести до деякого непокритого простору, але за допомогою властивості background-position ви зможете усунути проблему і як і раніше використовувати старі браузери.
body {
background: url ('bgimage.jpg');
повторення тла: без повторення;
розмір тла: 100%;
background-position: center;
}
Використовуючи наведений вище приклад з установленим значенням background-size рівним 100%, ви можете бачити, що CSS виглядає в основному однаково.
Результат у повноекранному браузері або браузері з розмірами, подібними до зображення, практично ідентичний. Однак при більш вузькому екрані недоліки починають проявлятися.
Зрозуміло, що це не ідеально, але це буде працювати як запасний варіант.
Згідно з caniuse.com, ця властивість працює в IE 9 +, Firefox 4 +, Opera 10.5 +, Safari 5 +, Chrome 10.5 + і в усіх основних мобільних браузерах. Це поширюється на всі сучасні браузери, доступні сьогодні, що означає, що ви повинні використовувати цю властивість, не побоюючись, що вона не буде працювати на чиєму екрані.
Між цими двома методами у вас не повинно виникнути проблем з підтримкою майже всіх браузерів. Оскільки background-size: cover отримує ще більше визнання серед браузерів, навіть цей запасний варіант стане непотрібним. Очевидно, що CSS3 і більш гнучкі методи проектування спростили і спростили, використовуючи зображення як адаптивні фони в елементах HTML.
