How to center a background image within a div

Question

Is it possible to center a background image in a div  I have tried just about everything - but no success    lt div id  doit  gt    Lorem Ipsum      lt  div gt     CSS  doit   background-image  url images pic png   background-repeat  none  text-align  center      Is this possible

User · Answer

This works for me for aligning the image to center of div   yourclass     background-image  url image png     background-position  center    background-size  cover    background-repeat  no-repeat

User · Answer

This works for me      lt style gt      WidgetBody                          background   F0F0F0              background-image url  images mini-loader gif                background-position  50  50                           background-repeat no-repeat                         lt  style gt

User · Answer

try    background-position center   EDIT  since this question is getting lots of views  its worth adding some extra info   text-align  center will not work because the background image is not part of the document and  is therefore not part of the flow   background-position center is shorthand for background-position  center center   background-position  horizontal vertical

User · Answer

If your background image is a vertically aligned sprite sheet  you can horizontally center each sprite like this    doit       background-image  url  images pic png         background-repeat  none      background-position  50   y position of sprite       If your background image is a horizontally aligned sprite sheet  you can vertically center each sprite like this    doit       background-image  url  images pic png         background-repeat  none      background-position   x position of sprite  50       If your sprite sheet is compact  or you are not trying to center your background image in one of the aforementioned scenarios  these solutions do not apply

User · Answer

This works for me    doit      background-image  url  images pic png        background-repeat  no-repeat      background-position  center

User · Answer

For center or positioning the background image you should use background-position property   The background-position property sets the starting position of a background image from top and left sides of the element   The CSS Syntax is background-position   xvalue yvalue      xvalue  and  yvalue  supported values are length units like px and percentage and direction names like left  right and etc    The  xvalue  is the horizontal position of the background and starts from top of the element   It means if you use 50px it will be  50px  away from top of the elements   And  yvalue  is the vertical position that has the same condition    So if you use background-position  center  your background image will be centered    But I always use this code     x000D   x000D   yourclass   x000D    background  url image png  no-repeat center  cover  x000D     x000D   x000D   x000D    I know it is so confusing but it means     x000D   x000D   yourclass   x000D    background-image  url image png   x000D    background-position  center  x000D    background-size  cover  x000D    background-repeat  no-repeat  x000D    x000D   x000D   x000D    And I know that too the background-size is a new property and in the compressed code what is  cover but these codes means fill background sizing and positioning in windows desktop background    You can see more details about background-position in here and background-size in here

User · Answer

doit       background  url url  no-repeat center

User · Answer

Use background-position   background-position  50  50

User · Answer

This works for me     network-connections-icon     background-image  url url     background-size  100     width  56px    height  56px    margin  0 auto

[html] How to center a (background) image within a div?

Examples related to html

Examples related to css

Examples related to image

Examples related to background

Examples related to center