Centering a background image, using CSS

I want to center a background image. There is no div used, this is the CSS style:

body{ background-position:center; background-image:url(../images/images2.jpg) no-repeat; } 

The above CSS tiles all over and does center it, but half the image is not seen, it just kind of moves up. What I want to do is center the image. Could I adopt the image to view even on a 21" screen?

13 Answers

background-image: url(path-to-file/img.jpg); background-repeat:no-repeat; background-position: center center; 

That should work.

If not, why not make a div with the image and use z-index to make it the background? This would be much easier to center than a background image on the body.

Other than that try:

background-position: 0 100px;/*use a pixel value that will center it*/ Or I think you can use 50% if you have set your body min-height to 100%.

body{ background-repeat:no-repeat; background-position: center center; background-image:url(../images/images2.jpg); color:#FFF; font-family:Arial, Helvetica, sans-serif; min-height:100%; } 

I use this code, it works nice

html, body { height: 100%; width: 100%; padding: 0; margin: 0; background: black url(back2.png) center center no-repeat;; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

I think this is what is wanted:

body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } 

Try

background-position: center center; 

Like this:

background-image:url(); background-repeat:no-repeat; background-position: center; background-size: cover; 

html{ height:100% } body{ background-image:url(); background-repeat:no-repeat; background-position: center; background-size: cover; }

There's an error in your code. You're using a mix of full syntax and shorthand notation on the background-image property.This is causing the no-repeat to be ignored, since it's not a valid value for the background-image property.

body{ background-position:center; background-image:url(../images/images2.jpg) no-repeat; } 

Should become one of the following:

body{ background:url(../images/images2.jpg) center center no-repeat; } 

or

body { background-image: url(path-to-file/img.jpg); background-repeat:no-repeat; background-position: center center; } 

EDIT: For your image 'scaling' issue, you might want to look at this question's answer.

Try this background-position: center top;

This will do the trick for you.

background-repeat:no-repeat; background-position:center center; 

Does not vertically center the background image when using a html 4.01 'STRICT' doctype.

Adding:

background-attachment: fixed; 

Should fix the problem

(So Alexander is right)

simply replace

background-image:url(../images/images2.jpg) no-repeat; 

with

background:url(../images/images2.jpg) center; 

background-position: center center; 

doesn't work for me without...

background-attachment: fixed; 

using both centered my image on x and y axis

background-position: center center; background-repeat: no-repeat; background-attachment: fixed; 

if your not satisfied with the answers above then use this

 * {margin: 0;padding: 0;} html { height: 100%; } body { background-image: url("background.png"); background-repeat: no-repeat; background-position: center center; background-size: 80%; } 

Had the same problem. Used display and margin properties and it worked.

.background-image { background: url('yourimage.jpg') no-repeat; display: block; margin-left: auto; margin-right: auto; height: whateveryouwantpx; width: whateveryouwantpx; } 

The only thing that worked for me is..

margin: 0 auto