Резиновый фон в Blogger
Хотелось бы рассказать о том, как сделать резиновый фон в Blogger. Резиновый background - это фон, который при смене разрешения монитора пропорционально меняет фоновую картинку. Необходимость рассмотрения этого вопроса возникла при проектировании этого блога. Так, в Blogger есть инструменты, позволяющие пользователю загружать свою фоновую картинку, но для создания резинового фона их не достаточно.
Рис. 1
Стандартными средствам мы можем выравнивать фоновую картинку по правому верхнему углу, по центру сверху, по левому верхнему углу. И представлены те же операции только с нижней стороной. Если наша картинка занимает не всю площадь монитора, мы можем её продублировать. Эти операции можно посмотреть в дизайнере шаблонов (рис. 1).
Для того, чтобы создать резиновый фон в Blogger, необходимо покопаться в коде html.
Заходим в меню Шаблоны и нажимаем кнопку Изменить html (рис 2).
Комбинацией клавиш ctrl+f вызываем строку поиска и вводим body {
Находим следующий кусок кода:
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
И после этого кода вставляем следующее:
body {
background: url(Ссылка на фоновую картинку) center center fixed no-repeat;
-moz-background-size: cover; /* Firefox до 4.0 */
-webkit-background-size: cover; /* Safari и Chrome */
-o-background-size: cover; /* Opera до версии 10.53 */
background-size: cover; /* CSS3 */
}
@media only all and (max-width: 1023px) and (max-height: 767px) {
body {
-webkit-background-size: 1023px 767px;/* Safari и Chrome */
-o-background-size: 1023px 767px;/* Opera до версии 10.53 */
-moz-background-size: 1023px 767px; /* Firefox до 4.0 */
background-size: 1023px 767px; /* CSS3 */
Ссылку на фоновую картинку я взял из кода выше
<Variable name="body.background" description="Body Background" type="background"
color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) url(Здесь ссылка на фоновую картинку) repeat fixed top left"/>
<Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>
Код для резинового фона взял здесь.
Протестировал в браузерах: Opera, Chrome, Mozilla Firefox, Safari - вроде всё работает. IE8 - фон отображает не корректно.