Фон сайта две картинки !

darewangog · March 18, 2010

Пробую реализовать но не получается !

Идея заключается в том чтоб на сайте сверху шла одна картинка в низу совсем другая !

Вот мой код !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <link type="text/css" rel="StyleSheet" href="style1.css" />
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
	<div class='wrap'>
	<div class='sheader'>
	<div class='sfooter'>

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

  </body>
</html>

/* CSS Document */
body, html { margin:0; padding:0; background: url('img/HeaderBg.jpg') no-repeat #000000; color:#000; }
.sheader {background: url('img/HeaderBg1.jpg') top center no-repeat; position: relative;}
.sfooter {background: url('img/HeaderBg.jpg') bottom center no-repeat; position: relative;}
.wrap {height:auto !important;height:100%;min-height:100%;}

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

Edited March 18, 2010 by darewangog

Great Rash · March 18, 2010

Одну картинку вешайте на бекграунд <html>, а другую на бекграунд <body>

darewangog · March 18, 2010

Одну картинку вешайте на бекграунд <html>, а другую на бекграунд <body>

Если делать как Вы говорите то тогда нижная картинка ставиться в низ браузера окна видимой части . а не все странице !

Вот что выходит

psywalker · March 18, 2010

А сделай так

html {height: 100%;}

body {min-height: 100%;}

darewangog · March 18, 2010

А сделай так
html {height: 100%;}
body {min-height: 100%;}

Непомогло !

Great Rash · March 18, 2010

Как вы пишете?

darewangog · March 18, 2010

Как вы пишете?

css

html {background: url('img/HeaderBg2.jpg') bottom center no-repeat;height: 100%;}
body {background: url('img/HeaderBg1.jpg') top center no-repeat;min-height: 100%;}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <link type="text/css" rel="StyleSheet" href="style1.css" />
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>2132131
  </body>
</html>

Great Rash · March 18, 2010

А у меня все получилось.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		html, body {
			min-height: 100%;
		}

		html {
			background: url('http://www.ciadata.com/consumer-credit-employment-backgrounds-roommate-checks.jpg') center top no-repeat;
		}

		body {
			background: url('http://fabconn.com/uploads/macuisine/header.jpg') center bottom no-repeat;
		}
	</style>
</head>

<body>

	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />

</body>
</html>

darewangog · March 18, 2010

А у меня все получилось.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma, Arial, sans-serif;
		}

		html, body {
			min-height: 100%;
		}

		html {
			background: url('http://www.ciadata.com/consumer-credit-employment-backgrounds-roommate-checks.jpg') center top no-repeat;
		}

		body {
			background: url('http://fabconn.com/uploads/macuisine/header.jpg') center bottom no-repeat;
		}
	</style>
</head>

<body>

	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
	test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />

</body>
</html>

СПС ! Выручил ! Низкий поклон ВАМ !

psywalker · March 18, 2010

А потому-что местами поменял, как нужно позицию рисунков. У тебя так: это не правильно.

html {background: url('img/HeaderBg2.jpg') bottom center no-repeat;height: 100%;}

body {background: url('img/HeaderBg1.jpg') top center no-repeat;min-height: 100%;}

darewangog · March 18, 2010

А потому-что местами поменял, как нужно позицию рисунков. У тебя так: это не правильно.
html {background: url('img/HeaderBg2.jpg') bottom center no-repeat;height: 100%;}
body {background: url('img/HeaderBg1.jpg') top center no-repeat;min-height: 100%;}

Минус этой методики в том что если страница пустая то все сежает вверх !

Great Rash · March 18, 2010

А вы задайте кроме min-height еще и height.

html, body {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

darewangog · March 18, 2010

А на div-ах такое ведь реально реализовать но так чтоб нижная картинка всегда прижималась к низу сайта независи от того сколько видно !

Great Rash · March 19, 2010

Вы ответьте чем вас не устраивает приведенный мной вариант?

Sign In

Фон сайта две картинки !

Question

Link to comment

Share on other sites

13 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

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information