Расположение фона страницы

вот так будет растягиваться

html {

background-image:url(images/bgheader.jpg);

background-repeat:repeat-x;}

А про центрирование по вертикали я не понял

body {

background: url(bg-header.jpg) no-repeat center;

}

Для фиксации фона background: url(bg-header.jpg) no-repeat center fixed;

Для скольжения фона background: url(bg-header.jpg) no-repeat center scroll;

ну то есть есть рисунок большой. по размеру он растягивается по горизонтали нормально.

но показывается верхняя часть рисунка то есть top а мне нужно center чтобы центральная часть показывалась по вертикали

Я дал код, в точности повторил как Вы описали

да но мне нужно чтобы еще background-size: cover работал

Данное значение не все браузеры понимают

http://astro-top.ru/index2.html вот ваш пример он центрирует по вертикали но по горизонтали не растягивает

http://astro-top.ru/index.html а вот так мне нужно по горизонтали растянуть по длинне страницы + отцентровать по вертикали

http://astro-top.ru/fon.jpg фоновое изображение

stylelad добавил 09.07.2011 в 14:30

спасибо большое. тогда скажите каким образом можно картинку растянуть по горизонтали по размеру экрана и отцентровать по вертикали. какой код понимают?

stylelad добавил 09.07.2011 в 14:38

а background-size: cover - по вертикали чтобы на 100% рисунок растягивался вместо горизонтали можно как то сделать?

Если честно, то я с этим никогда не сталкивался, я не сторонник таких больших файлов на сайте - скорость загрузки будет маленькая. Но css я знаю не на все 100%, но по моему таблицами стилей не прописать, я на сайтах для решения подобных тем видел подключение скриптов. CSS полностью понимают не все браузеры.

Сделал как Вы указали, все равно в фаерфоксе по верху центрируется. давайте я лучше вам покажу пример и спрошу как лучше это реализовать...

http://demo.graphpaperpress.com/immense/ - там на флеше смена картинок в фоне. а как проще реализовать подобное без флеша просто у каждой страницы сайта своя фоновая картинка которая растягивается одинаково на весь экран во всех браузерах?

А где вы взяли background-position-y? Нет такого свойства в ни в CSS2.1, ни в CSS3. А то с такими приблудами - новое и только-только начинающее поддерживаться свойство background-size + нестандартное background-position-y = 1% от посетителей с нужным браузером.

Используйте стандартное background-position и прописывайте экспериментальную поддержку background-size для более ранних версий браузеров.

body {
 background: url("bg-header.jpg") center no-repeat fixed; background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; -webkit-background-size: 100%;
}