Форум Сайтостроение Веб-строительство

Фон не размножается при увеличение страницы

X0
На сайте с 10.08.2011
Offline
7
Xe0n
1020

Спасайте, имеем следующее


<section id="bg">
//Сюда выводятся результаты поиска
</section>

<style>
#bg{
    width:100%;
    height:100%;
    position: relative;
    background: url("/img/bg50.jpg") repeat;
    padding-top:30px;
}
</style>

Так вот, по стандартной страничке то фон расползается, но когда в нее PHP выплевывает большой список результатов фоновая картинка почему то не хочет размножатся дальше по увеличившейся странице. А просто вылезает белый body. Подскажите пожалуйста как исправить? Где и что я упустил? Спасибо.

DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#1

просто body и html в разметке - две большие разницы.

в вашем стиле "height:100%;" - это 100% высоты body, так что фоном Вы заливаете как бе body. но вот кода страница по высоте больше чем окно браузера то html становится больше чем body, и "просто вылезает белый" именно html.

намёк понятен? если нет - просто задайте height:100% и для html и для body (высота body = высота html и высота html = высота body).

show must go on !!!...
Google AdSense улучшил адаптивные Google: расположение внутренних ссылок Яндекс выпустил Конструктор обновления
Geers
На сайте с 12.04.2011
Offline
487
Geers
#2

Должно быть так:

background: url("/img/bg50.jpg");

без repeat

А чтобы размножался фон сайта, должно быть так:

body {
background: url("/img/bg50.jpg");
}


---------- Добавлено 28.03.2012 в 22:46 ----------

DiAksID:
просто body и html в разметке - две большие разницы.

в вашем стиле "height:100%;" - это 100% высоты body, так что фоном Вы заливаете как бе body. но вот кода страница по высоте больше чем окно браузера то html становится больше чем body, и "просто вылезает белый" именно html.

намёк понятен? если нет - просто задайте height:100% для body (высота body = высота html).

Вы не правы! ID #bg может быть применен например к таблице на сайте, и к body он никак не относится.

Для body не надо задавать ширину и высоту, это и есть весь контейнер сайта.

Яндекс обновил подход к В Рекламной сети Яндекса Партнерам РСЯ стал доступен
DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#3
Geers:

...
Вы не правы! ID #bg может быть применен например к таблице на сайте, и к body он никак не относится.
Для body не надо задавать ширину и высоту, это и есть весь контейнер сайта.

да что Вы 😂 ? спорить лень вот пруфлинк тег body, если лень заходить читайте суть:


Элемент body предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера (!)...

достаточно авторитетно? можете там же и про тег html почитать, что бы "ощутить разницу".

Вы видимо просто разметкой плотно никогда не занимались, это основы...

Google не советует добавлять Google: использование разметки полезно Мэтт Катс: Google не
Geers
На сайте с 12.04.2011
Offline
487
Geers
#4

DiAksID, вы хотите чтоб я сейчас прям доказал на примере? :)

DiAksID
На сайте с 02.08.2008
Offline
236
DiAksID
#5

Geers:
DiAksID, вы хотите чтоб я сейчас прям доказал на примере? :)

оно мне надо? 😂 это у Вас непонятки.

я с этим многократно работал.

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

Вам придётся для основного враппера задавать только min-height=100% 😮 т.е. определять, что враппер (вдруг!) может быть по высоте больше чем body.

сразу всё поймёте. удачи...

Google AdSense улучшил адаптивные В Яндекс.Вебмастере появилась проверка Региональность в Google. Установка
Geers
На сайте с 12.04.2011
Offline
487
Geers
#6
DiAksID:
оно мне надо? 😂 это у Вас непонятки.

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

сразу всё поймёте. удачи...

Все понятно!

Я тоже не один десяток порталов сверстал. Да и не в ту степь вы поехали) речь не о футере. ;)

Взаимно удачи! :)

---------- Добавлено 28.03.2012 в 23:17 ----------

DiAksID:

Вам придётся для основного враппера задавать только min-height=100% 😮 т.е. определять, что враппер (вдруг!) может быть по высоте больше чем body.

Ага) и больше чем браузер, по высоте, вдоль и поперек) 😂

---------- Добавлено 28.03.2012 в 23:22 ----------

DiAksID:
просто body и html в разметке - две большие разницы.

в вашем стиле "height:100%;" - это 100% высоты body, так что фоном Вы заливаете как бе body. но вот кода страница по высоте больше чем окно браузера то html становится больше чем body, и "просто вылезает белый" именно html.

намёк понятен? если нет - просто задайте height:100% и для html и для body (высота body = высота html и высота html = высота body).

Верстальщик, так на будущее, чтоб небыло белых отступов, надо просто в body добавить: 

margin:0;

И все! ;)

И никакой html трогать не надо, и тем более указывать туда ширину и высоту. ;)

---------- Добавлено 28.03.2012 в 23:28 ----------

А лучше сделать так: 

html, body {

  margin:0;

  width:100%;

  height:100%;

}
Яндекс через 4 месяца как войти в IPKVM Cкрыть текст от поисковиков
X0
На сайте с 10.08.2011
Offline
7
Xe0n
#7

Товарищи, мой промах, не сказал об этом, конечно же для боди и хтмл прописана высота:


html, body {  
    height: 100%;   
}

Помогло применения background к body. Просто в самом начале стормозил когда применял фон к контейнеру, а не к боди, потому что шапка была прозрачная на всю ширину страницы и она тоже заливалась фоном, сейчас задал для нее цвет и все стало нормально.

Спасибо.

Google Data Studio запустил Яндекс обновил подход к Партнеры РСЯ получили возможность
Geers
На сайте с 12.04.2011
Offline
487
Geers
#8
Xe0n:
Товарищи, мой промах, не сказал об этом, конечно же для боди и хтмл прописана высота: 

html, body {  

    height: 100%;   

}

Помогло применения background к body. Просто в самом начале стормозил когда применял фон к контейнеру, а не к боди, потому что шапка была прозрачная на всю ширину страницы и она тоже заливалась фоном, сейчас задал для нее цвет и все стало нормально.
Спасибо.

Ну о чем я и говорил. ;)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий