Плавающее вертикальное фоновое изображение под другим фоновым изображением - PullRequest
Новая
       14

Плавающее вертикальное фоновое изображение под другим фоновым изображением

0 голосов
/ 21 марта 2011

Объяснение изображения: http://img219.imageshack.us/f/skrmavbild20110321kl160.png/

У меня есть фоновое изображение, которое я хочу наверху моей страницы, это изображение шириной 800px и высотой 400px.

Под этим изображением я хочу другое фоновое изображение, которое будет повторяться по вертикали (repeat-y) для остальной части страницы.

Я пробовал следующее 

<div id="bg-static">
 <div id="bg-repeat-y">
  <div>
   Text goes here
  </div>
 </div>
</div>

Дело в том, что я хочу, чтобы «текст шел сюда» над обоими элементами. (Смотри картинку, http://img219.imageshack.us/f/skrmavbild20110321kl160.png/)

Что я должен сделать, чтобы сделать это?

Ответы [ 2 ]

1 голос
/ 21 марта 2011

Вы делаете это слишком сложным, но это чрезвычайно легко.Вот что вам нужно сделать:

Ваше «бесконечное, повторяющееся» изображение будет отображаться в качестве фона сайта, например: 

body{ background: url("your-repeated-image.png"); }

Далее создайте HTML-код, подобный следующему: 

<body>
   <div id="container">
      any content, text, whatever goes here
   </div>
</body>

И просто поместите туда свое изображение 800x400px так: 

#container{ width: 800px; background: url("your-top-image.png") no-repeat; }

Во время тестирования временно используйте это: 

#container{ height: 600px; } /* erase after the content is ready */
0 голосов
/ 21 марта 2011

Я думаю, что решение было бы наоборот: иметь повторяющийся фон снаружи div и фиксированный фон высоты внутри div.

Некоторый код в jsfiddle: http://jsfiddle.net/EBK4C/

...