Проблема с фоном.

ShuRIk · May 24, 2011

Доброго времени суток.

Есть небольшая проблемка... Нужен фон в виде градиента, имеется изображение высотой 500рх и шириной 1рх. Нужно, чтобы оно растягивалось на всю область страницы. В данный момент, на короткой странице всё шоколадно, но если страница уходит за видимую область экрана, то на невидимую часть фон не тянется... Что не так?

Страница с кодом: http://qui-qua.ru/12.html

CSS:

html, body

{

margin: 0;

}

#background

{

position: absolute;

width: 100%;

height: 100%;

}

#page

{

position: absolute;

width: 100%;

height: 100%;

z-index:1;

}

P.S. Только не надо говорить про поиск... всё знаю, но всё не то...

zSpx · May 24, 2011

вот найди сам где у тебя фон задается??

yujin11 · May 24, 2011

Предлагаю сделать так.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html{
  width:100%;
  height:100%}
body{
  width:100%;
  height:100%;
  background:url('http://qui-qua.ru/Images/background.png') repeat-x 0% 100%;}
#wrap{
  }
</style>
</head>
<body>
<div id="wrap">  
</div>
</body>
</html>

тогда фон будет всегда прижат к низу.

есть ещё вариант задать боди мин.ширину и мин.высоту, тогда в этих пределах фон не должен резаться в не смотря на то в какой области (видимой или нет) он находится.

Edited May 24, 2011 by yujin11

ShuRIk · May 24, 2011

вот найди сам где у тебя фон задается??

Код надо внимательней смотреть...

Предлагаю сделать так.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html{
  width:100%;
  height:100%}
body{
  width:100%;
  height:100%;
  background:url('http://qui-qua.ru/Images/background.png') repeat-x 0% 100%;}
#wrap{
  }
</style>
</head>
<body>
<div id="wrap">  
</div>
</body>
</html>
тогда фон будет всегда прижат к низу.
есть ещё вариант задать боди мин.ширину и мин.высоту, тогда в этих пределах фон не должен резаться в не смотря на то в какой области (видимой или нет) он находится.

Не срабатывает =( http://qui-qua.ru/123.html

NortonFox · May 24, 2011

Главное понять суть, у вас есть картинка, которую вы хотите поставить фоном, и она имеет определенный размер. От сюда два варианта развития событий, или фон будет повторяться и заполнять все пространство или нет (у вас поставлено повторение по Х), получается, что по «X» фон будет продолжаться бесконечно, а вот по «Y» ограничится размером картинки.

Вот вариант решения - background: url("http://qui-qua.ru/Images/background.png") repeat-x scroll 0 0 #0A51BC;

Edited May 25, 2011 by NortonFox

ShuRIk · May 26, 2011

Главное понять суть, у вас есть картинка, которую вы хотите поставить фоном, и она имеет определенный размер. От сюда два варианта развития событий, или фон будет повторяться и заполнять все пространство или нет (у вас поставлено повторение по Х), получается, что по «X» фон будет продолжаться бесконечно, а вот по «Y» ограничится размером картинки.
Вот вариант решения - background: url("http://qui-qua.ru/Images/background.png") repeat-x scroll 0 0 #0A51BC;

К сожалению, это не вариант, я же написал, что градиент должен тянуться на всю заполненную область страницы...

buddah · May 27, 2011

Сделайте градиент на ширину и высоту окна, а ниже уже залейте одним цветом(на котором градиент заканчивается). Получается красиво.

Sign In

Проблема с фоном.

Question

ShuRIk

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

zSpx

Link to comment

Share on other sites

yujin11

Link to comment

Share on other sites

ShuRIk

Link to comment

Share on other sites

NortonFox

Link to comment

Share on other sites

ShuRIk

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information