PSD slicing background with image

Question

I got a PSD design for my website, and I'm having trouble coding the main banner. This is the page

The top banner (with the image of the little people) doesn't show properly on some screen resolutions. I sliced the entire banner together with the image and set is as a background image, and the text is live. The problem is, on some screens the image appears on top of the text.

How should I code this? I thought of slicing the image and adding it as a regular image element, but that's difficult because the image has a glow around it which blends into the background.

Is there any easier way to do this?

Thanks!

Answer 1

The reason why it does show up properly in certain screen resolution is because your image dimension is 1550x417, and you using CSS background position property to set it to 1300px 400px. That's not a very responsive way to setting background position, and it bound to vary from screen to screen.

There is an easier way to do this. Since the banner is mostly solid color why not slice only the graphic part of the image, and use background color? You can then position the image to the center of the element.

Slice: http://i.imgur.com/2s35JYs.png

Example: background: url('../images/banner2.jpg') center center no-repeat #ECE8DF;

Answer 2

you should add "center 0" to background style.

#banner {
background: url("../images/banner2.jpg") no-repeat center 0;
background-color: #e8e4da;
height: 400px;
padding: 0;
background-size: 1300px 400px;
border-bottom: 2px solid #fff;
}