Centering a background image using CSS

Question

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

User · Answer

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

User · Answer

I think this is what is wanted   body       background-image url  smiley gif        background-repeat no-repeat      background-attachment fixed      background-position center

User · Answer

Try this background-position  center top   This will do the trick for you

User · Answer

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

User · Answer

simply replace  background-image url    images images2 jpg  no-repeat    with  background url    images images2 jpg   center

User · Answer

Try  background-position  center center

User · Answer

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

User · Answer

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

User · Answer

The only thing that worked for me is    margin  0 auto

User · Answer

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

User · Answer

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

User · Answer

Like this   background-image url https   upload wikimedia org wikipedia commons thumb 8 8b Dore woodcut Divine Comedy 01 jpg 481px-Dore woodcut Divine Comedy 01 jpg   background-repeat no-repeat  background-position  center  background-size  cover     x000D   x000D  html  x000D  height 100  x000D    x000D   x000D  body  x000D  background-image url https   upload wikimedia org wikipedia commons thumb 8 8b Dore woodcut Divine Comedy 01 jpg 481px-Dore woodcut Divine Comedy 01 jpg   x000D  background-repeat no-repeat  x000D  background-position  center  x000D  background-size  cover  x000D    x000D   x000D   x000D

User · Answer

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

[css] Centering a background image, using CSS

Examples related to css