Question

my site has three div elements, header, content and footer. i have a picture in header, and i want, that under big resolutions too it looks nice. so i take big image, with 1800px width. by so it looks nice in resolution of 1800, but now, in small resolutions(for example 1024), it shows only first 1024px of my picture, but i want it to show the center 1024px of picture.
so is there any way, to set the backgound-image very big, but in small resolutions show center part of image?

#header
{
    background-image:url(../img/bg_header1.jpg);
    background-repeat:no-repeat;
    height:357px;
    width:100%;
}

maybe i have to chek the resolution by javascript, and then use such picture?
thanks in advance

Answer 1

http://www.htmldog.com/reference/cssproperties/background-position/

#header { background-position: center center; }