CODEWITHSUNDEEP
cssbackground-imagecentering
Tomas.R
Tomas.R

Reputation: 953

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 ?

Upvotes: 0

Views: 75

Answers (3)

Kheema Pandey
Kheema Pandey

Reputation: 10265

This will do the background image vertically and horizontally centered. check DEMO.

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

Upvotes: 0

NanoCat
NanoCat

Reputation: 609

If you are trying to center the image horizontally and vertically you can try:

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

Is this what you are looking for?

Upvotes: 0

Thomas
Thomas

Reputation: 212

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/

Upvotes: 1

Related Questions