Нужен совет

WalkMan · September 4, 2009

Есть bg резиновый по вертикали

как сделать нижний элемент графики фоновым?

пытался абсолютным позиционированием и z-index

что то не получилось, фон перекрывал контент

psywalker · September 4, 2009

Есть bg резиновый по вертикали
background
как сделать нижний элемент графики фоновым?
пытался абсолютным позиционированием и z-index
что то не получилось, фон перекрывал контент

1) bg не бывает резиновым, бывает только повторяющимся

2) Не понял твою задачу, покажи скрин того, что хочешь получить с подробным объяснением!

mishka · September 4, 2009

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

На первый див верхнюю завихрушку и серый цвет, на второй нижнюю.

про background-position слышали?

psywalker · September 4, 2009

<div>
	<div>
		....
	</div>
</div>
На первый див верхнюю завихрушку и серый цвет, на второй нижнюю.
про background-position слышали?

Так жалко тратить на эту хрень аж два дива Мишка, ты спроси у него, может ему фон у body пойдёт?

p.s. - Мих, а ты в шахматы рубишься?

Edited September 4, 2009 by psywalker

mishka · September 4, 2009

ну да

да както лет 5 назад играл разок

WalkMan · September 4, 2009

<div>
	<div>
		....
	</div>
</div>
На первый див верхнюю завихрушку и серый цвет, на второй нижнюю.
про background-position слышали?

туплю

Спасибо

вот только ослики как всегда отличились, не хотят его показывать

Так жалко тратить на эту хрень аж два дива Мишка, ты спроси у него, может ему фон у body пойдёт?

body Не прокатит

это фон дива с контентом

mishka · September 4, 2009

Быть того неможет чтобы не показывали.

С ие не так тяжело бороться. Вот если опера обновляется с багом..... вот где интересно становится

А ие - там все давно изучено, все понятно

WalkMan · September 4, 2009

Быть того неможет чтобы не показывали.
С ие не так тяжело бороться. Вот если опера обновляется с багом..... вот где интересно становится
А ие - там все давно изучено, все понятно

ну если я правильно понял то

	<div id="content">
		<div id="bg2">
..................................
		</div>
   </div>

#content {
  background: url(../img/content_bg1.jpg) no-repeat;
  background-color: #b3b3b3;
  width: 100%;
}

#bg2 {
  background: url(../img/content_bg2.jpg)no-repeat bottom right;
  width: 100%;
}

mishka · September 4, 2009

Да все правильно. Только блоки самостоятельно пытаются занять 100% ширины, так что width:100% в данном случае - лишний.

#content {
  background:#b3b3b3 url(../img/content_bg1.jpg) no-repeat;
}

#bg2 {
  background:url(../img/content_bg2.jpg) no-repeat 0 100%;
}

а так все правильно...

то что я позиционирую процентами а вы словами - ниче не меняет, просто я так привык

Все должно работать везде. Причем одинаково. Только наполнение внутрь какоенибудь сделайте.

WalkMan · September 5, 2009

Все должно работать везде. Причем одинаково. Только наполнение внутрь какоенибудь сделайте.

вобщем вот :

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>мебель</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />



</head>

<body>
<div id="main">

	<div class="line2"></div>
	<div id="content">
		<div id="bg2">

	</div>
	</div>


</div>
</body>

</html>

css

body {
width: 100%;
height: 100%;
background-color: #7E8082;
font : 14px tahoma, sans-serif;
}


html, body, ol, ul, li, h1, h2, h3, h4, h5, h6, p, form, img, table, dl, dt, dd { padding:0; margin:0; }
img {border: none;}


#main{
width : 998px;
margin-left : auto;
margin-right : auto;
height : 100%;
}


.line2{
  background: url(../img/goldline.jpg) repeat;
  height: 4px;
  width: 100%;
  overflow: hidden;
}

#content {
  background: url(../img/content_bg1.jpg) no-repeat;
  background-color: #b3b3b3;
  height: 1000px;

}

#bg2 {
  background: url(../img/content_bg2.jpg)no-repeat 100% 100%;
  height: 1000px;

}

в IETester 6-7-8 не отображают нижний элемент

Edited September 5, 2009 by WalkMan

psywalker · September 5, 2009

1)

background: url(../img/content_bg1.jpg) no-repeat;
background-color: #b3b3b3;

Вот так писать нельзя, потому что сначала ты пишешь общее правило background: url(../img/content_bg1.jpg) no-repeat; , а потом переопределяешь его background-color: #b3b3b3;, соответственно остаёшься без фона. Правильно писать background: #b3b3b3 url(../img/content_bg1.jpg) no-repeat;

2) Всегда лучше делай наоборот, вложенному блоку назначай верхний фон, а родителю нижний, потому что вложенный всегда будет наверху, даже без содержимого, видел твой скрин, поэтому думаю, что так и надо делать!

3) В ИЕ может не отображаться по двум причинам, 1) Нет содержания, заполни хотябы чем нибудь 2) Неправильно задан фон, выше об этом я писал.

Давай ссылку, будем смотреть

Edited September 5, 2009 by psywalker

WalkMan · September 5, 2009

1)
Вот так писать нельзя, потому что сначала ты пишешь общее правило background: url(../img/content_bg1.jpg) no-repeat; , а потом переопределяешь его background-color: #b3b3b3;, соответственно остаёшься без фона. Правильно писать background: #b3b3b3 url(../img/content_bg1.jpg) no-repeat;

спасибо буду иметь ввиду

нехватало в css значения для вложенного блока height:100%

хотя контента там хватает...

Edited September 5, 2009 by WalkMan

Sign In

Нужен совет

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