1

Как сделать все семантически правильно (т.е. без лишних div'ов и т.п.)? На данный момент есть правило в css:

html {background-image: url('../images/news.jpg'); 
      background-repeat: no-repeat; 
      background-attachment: fixed;
     }

Проблемы:

  1. Как правильно настроить высоту картинки\фона? Размер картинки: 1200 x 1550. Нужно чтобы картинка правильно (т.е. во всю ширину и высоту) отображалась на большинстве экранов с самыми разными разрешениями (именно поэтому она такая высокая) Важен случай, когда картинка > экрана по высоте. Например, как у меня (15 дюймов, 1280 x 800) картинка видна не полностью, а лишь та часть которая вмещается на экран. В таком случае возникает проблема добавления футера: футер уехал в самый низ картинки, т.е. его на экране не видно.
  2. Как правильно сделать фон для более широких экранов, чем мой? Растянуть фон - вроде бы это неправильно тк исказиться изображение. Если сделать шире фон, то как его настроить для большинства экранов чтобы отображался фон во всю ширину ?
  3. Я пытаюсь работать с фоном размером около 1-1,5 Мб. Не слишком ли это много для браузеров интернета (т.е. может придется долго ждать пока загрузиться вся веб-страничка) ?

3 ответа 3

4
  1. Правильно настроить высоту можно либо создав фоны для всех разрешений(их не так много), либо используя <img src="" />. Растяжение/сжатие фонового изображения - фишка css3, посему поддерживается отнюдь не всеми браузерами.
  2. см выше.
  3. Это офигительно много. Для ФОНОВОЙ картинки в 2 мегапикселя (1920х1080) можно уложиться в 300-600кб. Это много еще и потому, что при изменении размера средствами HTML, быстро работать она будет только на браузерах с поддержкой аппаратного ускорения.
12
  • Если создавать фоны для всех разрешений, то, как я понимаю, придется программно определять (с помощью Javascript, например) разрешение клиента, и вставлять соответствующий фон. Неужели нельзя обойтись только средствами css и html?
    – almac
    11 окт 2011 в 11:07
  • Можно. Я уже написал, как и какие будут трудности. "Вниз", на фон - img, у него задана высота и ширина. src - самый большой рисунок (по самому большому разрешению). Вверх - див-канва с большим z-index или большим отрицательным маргином, который содержит остальной сайт. Тормознуто будет, я гарантирую это.
    – knes
    11 окт 2011 в 11:10
  • Дело в том, что я стараюсь придерживаться правил семантической вертски, по которым нельзя просто так вставить img в html для оформления (что то вроде принципа). Вопрос по ширине решился тем, что сделал картинку пошире и выравнял ее по центру: html {...; background-position: center top;...} Остается проблема по высоте: картинка больше размеров экрана, и мне нужно как бы "обрезать" ее на том месте, где экран заканчивается, но так, чтобы можно было нормально прикрепить блок футера внизу страницы..
    – almac
    11 окт 2011 в 11:28
  • Картинку увидеть бы!
    – Palmervan
    11 окт 2011 в 11:31
  • Обрезать можно, вставив картинку в блок, у которого указать overflow: hidden. насчет принципов верстки не очень понял. :)
    – knes
    11 окт 2011 в 11:31
1

Осталось прикрутить футер к низу экрана так, чтобы при любых условиях он оставался внизу экрана (пока не знаю как это сделать).

Нужно, что бы футер был всегда внизу и виден? position: fixed; bottom: 0px;

Это будет хорошо для маленького футера - информера.

или футер должен быть привязан к низу картинки?

1
  • Спасибо! Уже футер привязал: position: absolute; bottom: 0; Так он располагается внизу страницы, в не окна браузера.
    – almac
    14 окт 2011 в 6:40
1

Надеюсь, что это универсальное решение, которое получится использовать и в дальнейшем. Итак, чтобы сделать фон, который подойдет к различным разрешениям, надо:

  • По высоте и по ширине сделать картинку максимально большой (например, 2000 x 1550 как у меня). Дальше нужно выровнять картинку по центру:

    html {
      background-image: url('../images/news.jpg'); 
      background-repeat: no-repeat;
      background-position: center top; overflow: hidden;
    }
    
  • Чтобы браузеру не пришлось долго загружать картинку, сжать ее (мне удалось сжать ее с ~1,5Mb до ~500Kb)

  • Осталось прикрутить футер к низу страницы (position: absolute; bottom: 0;)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.