| Admin | Дата: Четверг, 05-Дек-2013, 15:57:51 | Сообщение # 1 |
 Admin
Группа: Администраторы
Сообщений: 118
Репутация: 1
Статус: Offline
| 
Требования
* Заполняет всю страницу с изображением, без пробелов
* Сохраняет пропорции изображения
* Нет полосы прокрутки
* Кросс-браузерность
* Не Flash
Способ №1
картинка находится внутри нескольких «оболочек»:
HTML:
Код <div id="bg"> <div> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="images/bg.jpg" alt=""/> </td> </tr> </table> </div> </div>
CSS:
Код * { margin: 0;
padding: 0;
}
html, body, #bg, #bg table, #bg td {
height:100%;
width:100%;
overflow:hidden;
}
#bg {
position: fixed;
}
#bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
}
#bg td {
text-align:center;
vertical-align:middle;
}
#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
Чтобы разместить контент, добавим ещё один блок:
HTML:
Код <div id="cont"> <div class="box"> <!-- контент здесь --> </div> </div>
CSS:
Код #cont {
position:absolute;
top:0;left:0;
z-index:70;
overflow:auto;
}
.box {
margin: 0 auto;
width: 400px;
padding: 50px;
background: white;
padding-bottom:100px;
font: 14px/2.2 Georgia, Serif;
}
JAVASRCIPT ФИКС
Для IE6 может потребоваться добавить немного MooTools для фиксации
В FF по умолчанию Focus находится на body-элементе при загрузуке
страницы. При нажатии пробела могут вызникнуть некрасивые белые полосы
внизу страницы.
Чтобы этого избежать, добавьте следующий jQuery-код для скрытого элемента:
Код $(function(){
$(".box").prepend('<input type="text" id="focus-stealer" type="hidden" />');
$("#focus-stealer").focus();
};);
Баги в Safari 4 и Chrome, min-height не подгоняется
Способ №2
Это решение более лёгкое, без лишней нагруженности кодом. Но и недостатки есть — фон не центрируется в IE7, не работает вообще в IE6, и
не всегда пропорциональна.
Но это погрешность от простоты кода. Картинка находится просто в классе img.bg со свойством inline.
Итак:
Код <body> <img src="images/bg.jpg" class="bg" /> <div id="content"> <!--тут контент--> </div> </body>
CSS:
Код img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
div#content {
/* This is the only important rule */
/* We need our content to show up on top of the background */
position: relative;
/* These have no effect on the functionality */
width: 500px;
margin: 0 auto;
background: #fff;
padding: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 10pt;
line-height: 16pt;
-moz-box-shadow: #000 4px 4px 10px;
-webkit-box-shadow: #000 4px 4px 10px;
}
body {
/* These rules have no effect on the functionality */
/* They are for styling only */
margin: 0;
padding: 20px 0 0 0;
} |
| |
| |
