проблема с высотой (height:100%) при 2 background-image

hjcnjdobr · October 24, 2011

Всем привет.

Такая проблема возникла, необходимо поставить два баграунда. Один снизу в блоке по центру, простая однопиксельная повторяющаяся полоса, а другой - картинка накладывающийся сверху, необходимо контент наложить на первый, что бы он (первый) продолжался вниз до бесконечности, при:

<body>
	<div class="bg1">
   		<div class="bg2">
        	<div class="content">

        	</div>
      </div>
	</div>


</body>

*{
	margin:0;padding:0
	}
html, body{
	height:100%;
}

.bg2{
	background-image: url("../images/background_second.jpg");
	background-repeat:no-repeat;
	/*height:100%;*/
	height:100%;

}

.bg1{
	background-image: url("../images/background_first.jpg");
	/*height:100%;*/
	width:960px;
	margin: 0 auto;
	height:100%;
}

.content{
	/*height:100%;*/
}

по высоте браузера все нормально, но если наполнить контентом высотой больше чем окно браузера, то ниже будет ... вернее ничего не будет, контент будет, а фона нет! подскажите пожалуйста, как положить правильно два баграунда

пример с добавленными <br> - http://bv.pro.umarta.com/ind.html'>http://bv.pro.umarta.com/ind.html

другой вариант http://bv.pro.umarta.com/index.html'>http://bv.pro.umarta.com/index.html (http://bv.pro.umarta.com/)

hjcnjdobr · October 25, 2011

ну или хотя бы скажите, кто нибудь что это невозможно

ceil100 · October 25, 2011

уберите все height:100%; кроме body и html понятно, тоже

bg1 сделайте min-height:100%;

забыл про html :facepalmxd:

Edited November 7, 2011 by ceil100

hjcnjdobr · October 25, 2011

сделал, но как видите, если контент не заполнит всю высоту окна, то к сожалению ниже будет белый фон:

http://bv.pro.umarta.com/ind.html

может что то еще??

Edited October 25, 2011 by hjcnjdobr

Searcher · October 26, 2011

про min-height не думали?

hjcnjdobr · October 26, 2011

сделал

.bg1{

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

/*height:100%;*/

min-height:100%;

width:960px;

margin: 0 auto;

/*height:100%;*/

}

по совету

уберите все height:100%; кроме body
bg1 сделайте min-height:100%;

но к сожалению не совсем помогло

http://bv.pro.umarta.com/ind.html

может есть какие то другие варианты??

Searcher · October 26, 2011

не забывайте, что html - это тоже контейнер, так что пока вы ему не зададите высоту, дочерним элементам не откуда будет отсчитывать свои относительные высоты.

hjcnjdobr · November 7, 2011

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

ну неужели никто не ставил два баграунда под один контейнер??

Undead_46 · November 7, 2011

можно в body добавить

height: auto !important;

height: 100%;

min-height: 100%;

тогда высота будет ризиновая, а можно создать родительский блок <div class = "wrapper"></div> и поместить код туда

Switch74 · November 7, 2011

попробуй так


<style>
*{margin:0px;padding:0px;}
html,body{min-height:100%;height:100%;}
.bg1{min-height:100%;background:#ccc;}
.bg2{background:#aaa;}
.content{}
</style>
<body>
		<div class="bg1">
			<div class="bg2">
				bg2
			</div>
			<div class="content">
				content
			</div>
		</div>
</body>

psywalker · November 7, 2011

можно в body добавить
height: auto !important;
height: 100%;
min-height: 100%;
тогда высота будет ризиновая, а можно создать родительский блок <div class = "wrapper"></div> и поместить код туда

height: auto !important;

Вот это вот отголоски какой-то старой школы. Уже неактуально, как лет 5. А так же min-height:100%; у боди...вообще не катит.

Switch74 · November 7, 2011

Ну можно этот min-height:100% установить для <div> обёрточки.

в коде даже место от неё осталось, но я подумал что так нагляднее будет.

переработанный вариант по совету psywalker


<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
.body{min-height:100%;}
.bg1{min-height:100%;background:#ccc;}
.bg2{background:#aaa;}
.content{}
</style>
<body>
	<div class="body">
		<div class="bg1">
			<div class="bg2">
				bg2
			</div>
			<div class="content">
				conten
			</div>
		</div>
	</div>
</body>

Edited November 7, 2011 by Switch74

Sign In

проблема с высотой (height:100%) при 2 background-image

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information