Search code examples
cssbackground-imagecentering

centering background image vertically

I can't figure out how to center an image. It is cut when I use 'center center' as background position , the girl's head is not showing. Ahem.

body {
    background: url(http://media.silabg.com/uf/common/catch-the-sun01.jpg) no-repeat center center;
}

http://jsfiddle.net/TomasRR/xvjdow6j/

Any ideas ?

Solution

  • Define some heights so the image knows how/where it should be centered:

    html {
    height: 500px;
}

body {
    background: url("http://media.silabg.com/uf/common/catch-the-sun01.jpg") no-repeat center;
    height: 100%;
    width: 100%;
}

    http://jsfiddle.net/az6x908x/