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:

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

Is this possible?

score 312 · Accepted Answer · answered Feb 18 '11 at 10:39

312

#doit {
    background: url(url) no-repeat center;
}

answered Feb 18 '11 at 10:39

Lucas

10,476
7
39
40

29

Thanks. The specific CSS for centering is "background-position: center;" – pmont Jun 10 '15 at 17:11
@Green: See my answer for sprite background images. – Clayton Sep 14 '15 at 15:09
5

If you want the entire div to be filled with the image and no extra space you should use `background-size: cover;` If you want the entire image to show without any part of the image being cut off or stretched you want to use `background-size: contain;` – Zlerp Feb 28 '18 at 22:47

TimCodes.NET · Answer 2 · 2012-12-25T16:41:18.820

87

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);

edited Dec 25 '12 at 16:41

answered Feb 18 '11 at 10:36

TimCodes.NET

4,601
1
25
36

1

actually you just need `background-position:center;` – Dave Sag Jul 11 '12 at 09:23
The selected answer cause my whole background to disappear for some reason (to be fair I'm doing some jquery stuff that may be causing it?), but this answer works. Upvote. – bwoogie Jul 18 '17 at 20:15

score 16 · Answer 3 · answered Mar 17 '17 at 15:44

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 :

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

I know it is so confusing but it means :

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

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 .

score 16 · Answer 4 · answered Feb 18 '11 at 10:36

16

Use background-position:

background-position: 50% 50%;

answered Feb 18 '11 at 10:36

Capsule

6,118
1
20
27

1

useful if you need the image horizontally centered but on top vertically : background-position: 50% 0%; – Sébastien Gicquel Jan 09 '14 at 10:51
50% 0 is shorter then ;-) In CSS, you never need any unit when value is 0 – Capsule Jan 10 '14 at 10:11

score 7 · Answer 5 · answered Apr 25 '15 at 00:25

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.

score 6 · Answer 6 · answered May 13 '14 at 22:04

6

This works for me:

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}

answered May 13 '14 at 22:04

Hemerson Varela

24,034
16
68
69

score 4 · Answer 7 · answered Dec 07 '16 at 20:19

4

This works for me:

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

answered Dec 07 '16 at 20:19

Collin Adams

41
2

1

`margin: 0 auto;` where `auto` makes it center horizontally within the div. Thank you! – oyalhi Aug 08 '18 at 09:22
Works with sprite sheet sprites too. Thank you very much – maddogandnoriko Apr 19 '21 at 02:37

score 4 · Answer 8 · answered Jul 27 '20 at 17:06

4

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;
}

answered Jul 27 '20 at 17:06

sangfroid-eng

41
3

score 1 · Answer 9 · edited Dec 12 '14 at 16:36

1

This works for me :

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>

edited Dec 12 '14 at 16:36

László Papp

51,870
39
111
135

answered Dec 12 '14 at 16:18

Rodrigo Valenzuela

24
3

How to center a (background) image within a div?

9 Answers9

Linked

Related