Хотел бы ещё затронуть такую тему, как фоновое изображение страницы, и динамическое изменение его параметров, в зависимости от разрешения экрана пользователя. А именно: - изображение должно полностью заполнять фон страницы, независимо от разрешения экрана;
- должно, по возможности, сохранять пропорции (соотношение сторон);
- изображение НЕ должно вызывать скроллинга (полос прокрутки);
Изменение фонового изображения страницы с помощью CSS3-свойства «background-size» С приходом CSS3 появилось такое свойство, как «background-size», непосредственно отвечающее за масштабирование фона. Многие современные браузеры стремятся соответствовать стандарту W3C и уже поддерживают это свойство. К ним относится: Opera 9.5 и выше, Firefox 4 и выше,Safari 3 и выше, Chrome 4 и выше, Konqueror 3.5.4, и, как ни странно, лидер неподдержки стандартов - Internet Explorer 9. Все они уже поддерживают CSS3 свойство «background-size», но, как и обычно, коряво, и для разных браузеров, по своему: через -moz-background-size для Мозиллы; -o-background-size для Opera; -webkit-background-size для Safari, Chrome, и -khtml-background-size для Konqueror (WebKit-браузеров), соответственно. ヅ ... Как и было упомянуто выше, с приходом CSS3, а именно свойства «background-size», сделать это достаточно просто. Допустимые значения cвойства background-size: - «величина» - ширина и высота фонового изображения в прямом виде;
- «процент» - ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента;
- contain - изображение масштабируется, сохраняя при этом пропорции, по большей стороне так, чтобы и ширина и высота поместились внутри области фонового изображения;
- cover - изображение масштабируется, сохраняя при этом пропорции, по меньшей стороне так, чтобы и ширина и высота полностью покрыли область фонового изображения;
- auto — изображение имеет свой собственный размер (масштаб 100%), а если нет то масштабируется, как будто задано значение contain.
HTML-код:
CSS-стили: Code (CSS) <style type="text/css">
html,body{background-color:transparent;}
html{background:transparent url(_st/fon_v0.jpg) no-repeat center center fixed;
-moz-background-size:cover;
-o-background-size:102% auto;
-webkit-background-size:102% auto;
-khtml-background-size:cover;
background-size:cover;
}
</style>
Где:html,body{background-color:transparent;} - задаём html и body фоновый цвет - прозрачный - дабы картинка просвечивала. html{..... no-repeat center center fixed;...} - задаём фоновую картинку Html, фиксируем её по центру, запрещаем повторятся. html{background-size:cover;} - назначаем CSS3-свойству background-size значение «cover» - масштабировать изображение с сохранением пропорций по max размерам (ширине или высоте - что больше) блока - в данном Html.
☑ Пример ...
Изменение фона страницы посредством позиционированного изображенияЕщё один довольно простой способ зафиксировать и растягивать фон в зависимости от разрешения монитора пользователя, заключается в следующем: - под контент подкладывается изображение, фиксируется в верхнем левом углу и задаётся ему минимальная ширина и высота равная 100% - тем самым, сохраняя пропорциональность при ресайзе. Также, добавляется min-width ширины изображения таким образом, чтобы изображение никогда не будет меньше, своего фактического размера. Дабы она не находилась на переднем плане, саму картинку и блок-обёртку смещают по z-оси на задний план (z-index:-1). Также, используется @media screen and (max-width:1024px), которое корректирует положение картинки, если окно обозревателя меньше изображения, используя комбинацию процентной величины левого положения и отрицательного левом поля. HTML-код: Code (HTML) <img id="imgBg" src="/_content/_ext/img-bg/_st/ff11_3.jpg" alt="" />
- Добавляется после контента, перед закрывающим </body>
CSS-стили: Code (CSS) #imgBg{display:block;position:fixed;top:0;left:0;min-height:100%;min-width:1024px;width:100%;height:auto;z-index:-1;}
@media screen and (max-width:1024px){#imgBg{left:50%;margin-left:-512px;}}
☑ Пример ...
Internet Explorer, как "особо одарённый”, не фиксирует изображение, и требует для себя индивидуальный "костыль”, что и можно сделать, небольшой хак - для эмуляции position:fixed. Все это делаем через ... нет, не заднее место, но близко к тому ヅ, а используя conditional comments, то бишь - пишем стили только для эксплореров, в данном случае - версии менее v7. HTML-код: (для шестого ИЕ - в условных комментариях) Code (HTML) <img id="pageImg" src="/_content/_ext/img-bg/_st/fon_v0.jpg" width="100%" alt="" /></div>
CSS-стили: (сам хак) Code (CSS) <style type="text/css">
body{background:url(about:blank);background-attachment:fixed;}
#imgBg{top:0;left:0;width:100%;height:100%;position:absolute;top: expression(document.getElementsByTagName("body")[0].scrollTop+"px");}
</style>
Где:body{background:url(about:blank);background-attachment:fixed;} - убираем подрагивание страницы при скроллинге.. Источник этого решения, судя по всему, студия Лебедева.
☑ Пример ... Примечание: Нужно понимать, что масштабирование большого изображения, тем более зафиксированного неподвижным фоном, снижается производительность браузера.
Кроме того, чтобы не терялось качество при больших разрешениях экрана, изображение лучше использовать с максимальными размерами, а такие картинки могут весить очень много.
...
Источник: как, background, css, что, html, size, jquery, для, изображение, это, страницы, мои, изображения, cover | 