Фон больше чем разрешение монитора

GstarMax · September 23, 2012

Создаю новую страницу с размером body 1280px на 1800px. хочу добавить фон-картинку в верху страницы по всей ширине

размером 1280px на 545px.

Используя такой стиль:

body {

margin:0;

width:1280px;

height:1800px;

background:url(img/fonbody.jpg) no-repeat red;

background-position:top;

}

картинка размещается не по всей ширине, а только по той части, которую видно в браузере.

Если прокрутить страницу в право, то там нет картинки.

Как сделать, что бы она размещалась по всей ширине?

DownHouse · September 23, 2012

как-то так: background-position: left top;

непонятно только зачем вы принудительно растягиваете боди и указываете ему высоту

GstarMax · September 23, 2012

как-то так: background-position: left top;
непонятно только зачем вы принудительно растягиваете боди и указываете ему высоту

Это не поможет, я уже пробовал.

mrnobody · September 23, 2012

Может background-size поможет?

GstarMax · September 23, 2012

Может background-size поможет?

Тоже пробовал, как то не тот эффект, что нужен :blush:

DownHouse · September 23, 2012

Тогда так

<body>

</body>

#wrapper {

margin:0;

width:1280px;

height:1800px;

background: red url(img/fonbody.jpg) 50% 0 no-repeat;

}

GstarMax · September 23, 2012

Тогда так
<body>
<div id="wrapper"></div>
</body>
#wrapper {
margin:0;
width:1280px;
height:1800px;
background: red url(img/fonbody.jpg) 50% 0 no-repeat;
}

Спасибо, это работает!

Есть еще такой способ:

html {

display:table;

width:100%;

font-size: 100.1%;

}

body {

width:1280px;

height:1800px;

margin:0;

background:url(img/fonbody.jpg) no-repeat red;

background-position: top;

}

только в опере не работает (у меня версия 11.51), а в хроме и FF норм.

может кто то знает почему?

Sign In

Фон больше чем разрешение монитора

Question

GstarMax

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

DownHouse

Link to comment

Share on other sites

GstarMax

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

GstarMax

Link to comment

Share on other sites

DownHouse

Link to comment

Share on other sites

GstarMax

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information