Верстка фона

Faradey99 · November 1, 2010

Подскажите пожалуйста, как верстать такой фон?

Сам я додумался только до такого: верхний фон - один блок, нижний фон - второй блок. Родительскому блоку (в данном случае <body>) задаю position:relative, а верхнему и нижнему фону задаю pozition:absolute и z-index:-1.

В коде вот так:

<!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">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
  <style type="text/css">
	* {margin:0;padding:0}
	body {background:#F5F5F5;position:relative}
	div.top-bg, div.bottom-bg {height:60px;position:absolute;width:100%;z-index:-1}
	div.top-bg {background:url('top-bg.gif') repeat-x top left}
	div.bottom-bg {background:url('bottom-bg.gif') repeat-x bottom left}
  </style>
</head>

<body>
  <div class="top-bg"></div>
  <div class="bottom-bg"></div>
</body>
</html>

CEBEP · November 1, 2010

Два градиента выделяете в два отдельных рисунка, устанавливаете как фон к боди (если вас устраивает html 5 то можно сразу оба если не устраивает то придётся разобраться со вложенным дивом) и задаёте им repeat-x. Так же необходимо указать цвет фона в вашем случае #f5f5f5;

Edited November 1, 2010 by CEBEP

Faradey99 · November 2, 2010

То есть, как я понял, body я задаю верхний градиент, а нижний градиент с помощью вложенного абсолютно позиционированного дива?

Faradey99 · November 2, 2010

Или все содержимое body обернуть в ещё один блок, которому задать нижний фон?

<!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">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
  <style type="text/css">
	* {margin:0;padding:0}
	body {background:url('top-bg.gif') repeat-x top left #F5F5F5}
	div.bottom-bg {background:url('bottom-bg.gif') repeat-x bottom left}
	div.wrapper {
	  background:#FAFAFA;
	  margin:0 auto;
	  max-width:1280px;
	  min-width:980px
	}
  </style>
</head>

<body>
  <div class="bottom-bg">
	<div class="wrapper">
	....
	</div>
  </div>
</body>
</html>

CEBEP · November 2, 2010

<!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">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title></title>
  <style type="text/css">
	* {margin:0;padding:0}
	body 
	{
		background:#ccdae3 url('bottom-bg.jpg') repeat-x bottom;
	}
	div.bg 
	{
		background:url('top-bg.jpg') repeat-x;
		min-height:300px;
	}
  </style>
</head>

<body>
  <div class="bg">
	Если надо чтобы нверняка градиент был ниже можно сделать что-то вроде подвала чисто под фон или поставить min-height побольше или дать себе труд напузырить побольше контента
  </div>
</body>
</html>

P.S. Убедитесь что у вас есть рисунки с указанными у меня в коде именами чтобы всё корректно отобразилось

Faradey99 · November 2, 2010

Спасибо, работает Но, мне необходимо чтобы и верхний и нижний градиент были на заднем фоне (под div.wrapper) как на картинке:

Faradey99 · November 2, 2010

Поэтому я и спрашивал про position:absolute и z-index:-1, наверное я неправильно сформулировал вопрос, правильнее будет спросить стоит ли его здесь использовать или есть способ получше?

CEBEP · November 2, 2010

Ну создайте внутри моего примера посередине дивчик с красными боками...

Faradey99 · November 3, 2010

Блин, протупил, спасибо большое СЕВЕР!

Sign In

Верстка фона

Question

Faradey99

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

CEBEP

Link to comment

Share on other sites

Faradey99

Link to comment

Share on other sites

Faradey99

Link to comment

Share on other sites

CEBEP

Link to comment

Share on other sites

Faradey99

Link to comment

Share on other sites

Faradey99

Link to comment

Share on other sites

CEBEP

Link to comment

Share on other sites

Faradey99

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information