Question

I have a site design that uses background images and textures as a feature of the site.

See background design concept here: http://www.flickr.com/photos/54233587@N03/6145240784/in/photostream

The background is intended to work like this:

The page background has a tiled pattern (or on some pages there will be solid background colour).

The top part of the background is overlayed with a background image. The background image is a large image (2000px wide) and needs to be centred in the window. Depending on the page, the height of the image will crop from the bottom (that is, on one page the image may need to be 400px, while on others it may be 450px). This background image also has a CSS3 box-shadow applied so there is a slight shadow at the bottom of the image. This background image cannot use a fixed position – that is, it should move with the page if it is scrolled.

All other page content sits on top of the background in a centered div, indicated by the black box in the screenshot.

I have tried to achieve this by targeting the HTML5 html node for the tiled background.

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

Then, for the overlaying background image I’ve been using a div element to insert an image.

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

Then styling the img to try and center, not be fixed when scrolling, and resize the div to crop image from bottom. All without much success.

Thanks.

Answer 1

I would do something like this.

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;
}