Размещение 2-х изображений в качестве фона на одном теле - PullRequest
Новая
       46

Размещение 2-х изображений в качестве фона на одном теле

1 голос
/ 21 февраля 2012

Уважаемые посетители stackoverflow!

Я не могу решить простую проблему: Тело с задним фоном картинки "1.jpg" (оно автоматически прижимается к заголовку), Мне все еще нужно поставить картинку - "2.jpg" , чтобы нажимать напротив нижнего колонтитула. То есть мне нужна некоторая «резиновая раскладка» по высоте, чтобы изображения скользили при большой высоте страницы, и приходили, когда контента не хватало. Я был бы рад связать рабочий пример (даже не демонстрационный пример, а просто сайт, на котором я сам смотрю исходный код), но, по крайней мере, я был бы благодарен за обычные предложения и идеи! Заранее спасибо.

Извините за плохой английский, я пытался грамотно написать.

Обновление:

Большое спасибо за ваши ответы. Не обращай внимания на то, что я выбрал только один, вы мне помогли, и я вас всех благодарю!

Ответы [ 3 ]

3 голосов
/ 21 февраля 2012

Поместите изображение 1.jpg на фоне тела с помощью css и 2.jpg на фоне нижнего колонтитула.

Я не знаю, каковы размеры ваших изображений, поэтому вы можете посмотреть ссылку ниже, чтобы получить некоторую помощь -

http://css -tricks.com / сниппеты / CSS / фиксированной колонтитул /

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

2 голосов
/ 21 февраля 2012

Вы можете достичь этого с помощью CSS3: 

body {
    background: url("1.jpg") top left,
        url("2.jpg") bottom right;
}

Если вам требуется поддержка старых браузеров ( См. Здесь для текущей поддержки ), вам придется использовать тег для второгоизображение.

1 голос
/ 21 февраля 2012

Для полной поддержки браузера у меня было бы одно изображение на <body>, а затем другое изображение на контейнере сайта, например <div id="site">

HTML 

<html>
  <head>
    <title>Title!</title>
  </head>
<body>
  <div id="site">
    [Your website here]
  </div>
</body>

CSS 

body {background: url(img/image-1.jpg) top no-repeat;}
#site {background: url(img/image-2.jpg) bottom no-repeat;}
...