«Бложка»
Наш Блог |
Все статьи > Растянуть фон на весь экран с помощью CSS3Мы можем растянуть background на чистом css, благодаря свойству background-size которое присутствует в CSS3. Мы будем использовать html элемент, это лучше чем body, так как он всегда будет равен высоте окна браузера. Мы сделаем background фиксированным и поставим его в центре окна, после этого мы его растянем на весь экран с помощью свойства background-size.html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }Кроссбраузерность: Safari 3+ Chrome Whatever+ IE 9+ Opera 10+ (Opera 9.5 поддерживает background-size но не поддерживает ключевых слов) Firefox 3.6+ Также есть вариант решения для IE, только необходимо тестировать. Некоторые вебмастера говорят, что могут возникнуть проблемы c cсылками и скроллингом. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; Автор: Yorku, ©"Копипаст" |