размещение фонового изображения в div - PullRequest
Новая
       1

размещение фонового изображения в div

0 голосов
/ 16 августа 2011

У меня есть фоновое изображение, которое я хочу показать после верхнего заголовка.Это изображение должно быть на остальной части страницы.На более позднем этапе у меня может быть даже нижний колонтитул, и изображение должно занимать все пустое пространство между верхним и нижним колонтитулом.Я пытаюсь разместить это фоновое изображение в пустом пространстве, чтобы поверх него у меня были элементы div, показывающие содержимое и т. Д. Я добился этого, когда просто поместил изображение на фон body, однакоТеперь я хочу, чтобы фоновое изображение ПОСЛЕ окончания верхнего заголовка.

Пример: http://jsbin.com/opokev/2

CSS: 

.backgroundimage {
 background: url(http://s1.postimage.org/ur0h52mvy/Sketch2.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;


}
div#masthead {
    background-color: #262626;
    height: 85px;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 500;
}

HTML 

<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen" charset="utf-8">
<body>
  <div id="masthead"></div>
  <div class="backgroundimage"></div>
</body>

Ответы [ 2 ]

2 голосов
/ 16 августа 2011

Вы можете установить свое изображение как фоновое изображение тела со смещением для заголовка, например: 

body {
    background-image: url('http://s1.postimage.org/ur0h52mvy/Sketch2.jpg');
    background-position: 0px 85px;
    background-repeat: no-repeat;
}
div#masthead {
    background-color: #262626;
    height: 85px;
    padding: 0;
    width: 100%;
    margin: 0;
}
0 голосов
/ 16 августа 2011 
 body { background: url('http://s1.postimage.org/ur0h52mvy/Sketch2.jpg') no-repeat; background-position: 0px 85px; }
...