Форум PHP программистов > Как сделать 2 фона?

[ Поиск ] - [ Пользователи ] - [ Календарь ]

SnowWind

11.04.2011 - 05:07

Всем привет.

Запарился с фоном не могу понять как сделать их 2

Смотрите на рисунке.
Фон задан следующим образом <body>Тут задан фон неба<div>Тут задан фон травы</div></body>
В свойствах body я прописал фон неба. Сразу после тега body идёт div где прописан фон травы. Так вот вопрос - а как под фоном неба сделать фон травы? (на белом пространстве)
Очень надеюсь на ваши советы

Спустя 13 минут, 10 секунд (11.04.2011 - 04:20) kirik написал(а):

Может проще прописать для body фон травы, а сверху наложить фон неба? Если уж они в такое последовательности должны накладываться

Спустя 5 минут, 13 секунд (11.04.2011 - 04:25) inpost написал(а):

2 дива = 2 слоя. 3 дива = 3 слоя.

Спустя 2 часа, 15 минут, 17 секунд (11.04.2011 - 06:41) SnowWind написал(а):

вы видимо не поняли, создав в теге БОДИ тег ДИВ и присвоив ему фон травы - она накладывается только на странице, вот так как на КАРТИНКЕ.
Любой фон в ВНУТРИ тега ДИВ попадает только на эту область.
А фон неба прописан В ТЕЛЕ тега БОДИ, поэтому выходит ЗА ПРЕДЕЛЫ. Ну вот как мне сделать фон травы так же за пределами, как фон неба. Ведь 2 фона в тег не пропишешь.

Спустя 17 минут, 33 секунды (11.04.2011 - 06:58) kirik написал(а):

SnowWind
В чем проблема сделать див с шириной на окно браузера, высотой с фон с небом и залить его небом. Ну а боди залить ТРАВОЙ.

Спустя 8 минут, 48 секунд (11.04.2011 - 07:07) SnowWind написал(а):

В том что я не знал что так можно сделать

а как это сделать? ) Высоту в пикселах - к примеру 300 постоянную? А ширину в 100%

Спустя 10 минут, 6 секунд (11.04.2011 - 07:17) kirik написал(а):

Див вообще блочный элемент, поэтому он по умолчанию на 100% растягивается.

Спустя 23 минуты, 23 секунды (11.04.2011 - 07:41) SnowWind написал(а):

По высоте и ширине? Тогда что то я не пойму как в ширину окна размеры задать?

Спустя 12 минут, 34 секунды (11.04.2011 - 07:53) kirik написал(а):

<body>
   <div class="sky">
       <div class="site">....</div>
   </div>
</body>

body {
   ...
   background: url('grass.png') ...;
   ...
}

div.sky {
   height: 300px;
   background: url('sky.png') ...;
}

Спустя 14 минут, 27 секунд (11.04.2011 - 08:08) SnowWind написал(а):

да не получается так! если сделать вот так...

<body>
   <div class="sky">
       <div class="site">....</div>
   </div>
</body>

То вообще всё сжимается в кучу почему то.
А если вот так

<body>
   <div class="sky"></div>
       <div class="site">....</div>
 </body>

И вот так


body {
padding: 0px;
margin-left: auto;
margin-right: auto;
margin-top:0px;
margin-bottom:0px;
background-image:url(grass.gif);
background-repeat:repeat;
max-width: 1000px;
min-height: 1000px;
}



div.sky {
position:absolute; 
left 0px;
top 0px;
width: 100%;
height: 100%;
background-image:url(fon_forest.png);
background-repeat:repeat-x;
border: 3px solid red;
}

То фон неба появляется только справа :(

Делаю так

div.sky {
position:absolute; 
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-image:url(fon_forest.png);
background-repeat:repeat-x;
}

всё нормально.
Но думаю что что-то тут всёравно НЕ правильно...

Спустя 1 час, 47 минут, 37 секунд (11.04.2011 - 09:55) kirik написал(а):

Цитата (SnowWind @ 11.04.2011 - 01:08)

всё нормально.
Но думаю что что-то тут всёравно НЕ правильно...

position:absolute; << зачем?

Вот простой пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style>
html, body {
     margin: 0;
     padding: 0;
     height: 100%;
     width: 100%;
}
body {
     background: #3f6d0b;
}
div.sky {
     height: 100%;
     background: url('sky.jpg') no-repeat;
}
div.content {
     background: #fff;
     width: 1000px;
     height: 100%;
     margin: 0 auto;
}
</style>
</head>
<body>
<div class="sky">
     <div class="content">test</div>
</div>
</body>
</html>

получается так.

Быстрый ответ:

Здесь расположена полная версия этой страницы.