CSS изображение поверх другого для фона сайта - PullRequest
Новая
       0

CSS изображение поверх другого для фона сайта

3 голосов
/ 04 июля 2011

Привет, я пытаюсь сделать изображение поверх другого в 1 теге.

По сути, я хочу, чтобы изображение было баннером сверху, поэтому повторите -x, затем под ним, я хочу, чтобы фоновое изображение повторялось несколько раз

Так что-то вроде этого 

body
{
 background:url(banner.jpg); repeat: repeat-x;
 background:url(background.jpg); 
}

не уверен на 100%, как это сделать ... Я думаю, это объясняет, как бы мне это хотелось.

Возможно, я также захочу добавить что-то внизу позже, так как после того, как фон будет готов, я бы хотел что-токак фон: url (footer.jpg) repeat: repeat-x;Дно

Ответы [ 3 ]

4 голосов
/ 04 июля 2011

Я думаю, что это то, что вы после.

http://jsfiddle.net/wpqDy/

html {
    height: 100%;
    width: 100%;
    background: url("bg.jpg") repeat 0px 3px;
}

body {
    background: url("bg_top.jpg") repeat-x top left;    
    height: 100%;
    width: 100%;
}
2 голосов
/ 04 июля 2011

Вам нужно будет поместить фоновые изображения в два разных контейнера. Возможно, что-то вроде этого: 

<body>
  <div id="page">
    <div id="content">
      ...
    </div>
  </div>
</body>


#page
{
  background:url(background.jpg); 
}

#content
{
  background:url(banner.jpg); repeat: repeat x;
}
1 голос
/ 04 июля 2011

CSS3 имеет поддержку нескольких фонов на одном элементе; это относительно широко поддерживается, за исключением IE <= 8. Вы можете написать следующее: </p> 

body
{
  background-image: url(banner.jpg), url(background.jpg);
  background-repeat: repeat-x, repeat;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...