фон выложен плиткой с гибким фоновым изображением сверху (ой - и тень)

Question

У меня есть дизайн сайта, который использует фоновые изображения и текстуры в качестве функции сайта.

Смотрите концепцию дизайна фона здесь: http://www.flickr.com/photos/54233587@N03/6145240784/in/photostream

Фон предназначен для работы следующим образом:

Фон страницы имеет мозаичный рисунок (или на некоторых страницах будет сплошной цвет фона).

Верхняя часть фона наложена на фоновое изображение. Фоновое изображение - это большое изображение (шириной 2000 пикселей), которое нужно центрировать в окне. В зависимости от страницы высота изображения будет обрезаться снизу (т. Е. На одной странице может потребоваться 400 пикселей, а на других - 450 пикселей). К этому фоновому изображению также применена блочная тень CSS3, поэтому в нижней части изображения есть небольшая тень. Это фоновое изображение не может использовать фиксированную позицию, то есть оно должно перемещаться вместе со страницей при прокрутке.

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

Я попытался добиться этого, настроив HTML5-узел HTML для мозаичного фона.

html {
    background: url(../img/pegboard.jpg) repeat center;
}

Затем для наложенного фонового изображения я использовал элемент div для вставки изображения.

<div id="bgimage"><img src="mybgimage.jpb"></div>

Затем введите img, чтобы попытаться отцентрировать, не фиксировать при прокрутке и измените размер div, чтобы обрезать изображение снизу. Все без особого успеха.

Спасибо.

Answer 1

Я бы сделал что-то подобное.

HTML:

<div id="bgimage"></div>
<div id="content">
   Actual content goes here.
</div>

CSS:

body {
    background: url(../img/pegboard.jpg) repeat center;
}
#bgimage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: url(../img/mybgimage.jpg) no-repeat center;
    height: 400px;
    box-shadow: 0 5px 5px -5px #000;
}
#content{
    margin: 0 auto;
    width: 960px;
    height: 1000px;
    background: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
}