Хочеться зробити все семантично правильно (тобто без зайвих div'ов і т.п.). На даний момент є правило в css:
- Як правильно налаштувати висоту картінкіфона? Розмір картинки 1200 x 1550. Потрібно щоб картинка правильно (тобто на всю ширину і висоту) відображалася на більшості екранів з різними дозволами (саме тому вона така висока) Важливий випадок, коли картинка> екрану по висоті. Наприклад, як у мене (15 дюймів, 1280 x 800) картинка видно не повністю, а лише та частина яка вміщається на екран. В такому випадку виникає проблема додавання футера: футер поїхав в самий низ картинки, тобто його на екрані не видно.
- Як правильно зробити фон для більш широких екранів, ніж мій? Розтягнути фон - начебто це неправильно тк спотворитися зображення. Якщо зробити ширше фон, то як його налаштувати для більшості екранів щоб відображався фон у всю ширину?
- Я намагаюся працювати з фоном розміром близько 1-1,5 Мб. Чи не занадто це багато для браузерів інтернету (тобто може доведеться довго чекати поки завантажитися вся веб-сторінка)?
заданий 11 Жовтня '11 в 10:17
- Правильно налаштувати висоту можна або створивши фони для всіх дозволів (їх не так багато), або використовуючи. Розтягування / стиснення фонового зображення - фішка css3, тому підтримується аж ніяк не всіма браузерами.
- див. вище.
- Це офигительно багато. Для фонових картинки в 2 мегапікселя (1920х1080) можна вкластися в 300-600кб. Це багато ще й тому, що при зміні розміру засобами HTML, швидко працювати вона буде тільки на браузерах з підтримкою апаратного прискорення.
відповідь дан 11 Жовтня '11 о 10:37
Можна, можливо. Я вже написав, як і якими будуть труднощі. "Вниз", на фон - img. у нього задана висота і ширина. src - найбільший малюнок (по найбільшому дозволу). Вгору - див-канва з великим z-index або великим негативним Маргинем, який містить решті сайт. Зупинитися буде, я гарантую це. - knes 11 Жовтня '11 о 11:10
Сподіваюся, що це універсальне рішення, яке вийде використовувати і надалі. Отже, щоб зробити фон, який підійде до різних дозволів, треба:
Щоб браузеру не довелося довго завантажувати картинку, стиснути її (мені вдалося стиснути її з
Залишилося прикрутити футер до низу сторінки (position: absolute; bottom: 0;)