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?

Now that would depend on the size of the image and the size of the browser, wouldn't it? — nikc.org, Apr 15 '10 at 07:26
@nikc +1, I am aware, but need to know if there was a work around — X10nD, Apr 15 '10 at 07:31

Kyle · Accepted Answer · 2010-04-15T08:15:22.313

380

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

edited Apr 15 '10 at 08:15

answered Apr 15 '10 at 07:27

Kyle

65,599
28
144
152

It does centralize, but displays only half the screen, I wish stackoverflow had an option to attach screenshots – X10nD Apr 15 '10 at 07:32
You could make a screenshot and upload it to your server or a free pic hosting site like photobucket.com, or make a temporary example at www.jsfiddle.net and post a link for us. From what you've said, the image is 1600x1200 and most screen resolutions don't go that high, try resizing your image to fit. I use a widescreen monitor at 1440x900 for example. – Kyle Apr 15 '10 at 07:34
screenshot - http://imagevat.com/picview.php?ig=6179 I am not sure how to upload images to jsfiddle, if you can help me out there http://www.jsfiddle.net/yWrQP/ – X10nD Apr 15 '10 at 07:52
To add an image to jsfiddle, just use the full http path EX: `background-image:url(http://www.myurl.com/images/image.jpg);` put that in the CSS. – Kyle Apr 15 '10 at 07:59
I dont have the server to do it, but used an imagehosting site, but still check it out now – X10nD Apr 15 '10 at 08:03
I checked it out, I saw what you're going for, and am actually kinda stumped as to why it doesn't work. I edited my answer, try setting your body min-height. – Kyle Apr 15 '10 at 08:05
I thought it was a browser used, and checked on IE 8, FF, Chrome. – X10nD Apr 15 '10 at 08:08
Check cross browser compatibility after you have it working in FF, did you set the `min-height`? – Kyle Apr 15 '10 at 08:09
min-height worked, I gave it the height of the image since I know it, probably have to use jquery to do it. Now why is there a 5px space on top. I did top:0px; does not seem to work though, any ideas? check jsfiddle.net/yWrQP – X10nD Apr 15 '10 at 08:10
Your jsfiddle doesn't do anything, when you click run it should show up your result in the bottom right frame, please amend your fiddle. Here's an example of one I've been messing with http://jsfiddle.net/waFC8/. – Kyle Apr 15 '10 at 08:16

score 25 · Answer 2 · answered Dec 18 '12 at 17:49

25

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

answered Dec 18 '12 at 17:49

victor Martinez

251
3
2

Thanks! I didn't even know that there were different declarations for webkit, etc... – Mike Rapadas Feb 28 '14 at 09:24
Hey Victor, I used your code a lot, but it look it doesn't work now. I added background-attachment: fixed; but it is not working on my iPad browser... – Vadym Nov 22 '15 at 19:09
Only `-webkit-background-size` exists from the special declarations though. – BigBang1112 Oct 12 '18 at 16:17

score 20 · Answer 3 · edited Jan 16 '20 at 14:01

20

I think this is what is wanted:

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

edited Jan 16 '20 at 14:01

Ry-

218,210
55
464
476

answered Feb 12 '14 at 06:10

Crab

201
2
2

6

background-attachment fixed the issue for me ;) – kdoteu Feb 02 '16 at 19:34

score 8 · Answer 4 · answered Apr 15 '10 at 07:04

8

Try

background-position: center center;

answered Apr 15 '10 at 07:04

Pekka

442,112
142
972
1,088

1

How come the double center center work? Anyway it does not solve the issue, still the same – X10nD Apr 15 '10 at 07:14
2

@Jean: look at the specs, background-position actually can actually take 2 values (horizontal and vertical). http://www.w3.org/TR/CSS2/colors.html#propdef-background-position – Rob van Groenewoud Apr 15 '10 at 07:18
1

@rob its not working, the image is tiling. The image is a 1600x1200 and my screen size is 1280x800 – X10nD Apr 15 '10 at 07:21
`background-image` only takes one argument. You need to specify `background-repeat: no-repeat` as a separate instruction – nikc.org Apr 15 '10 at 07:25
3

@Jean you can't resize a background image (yet). It's possible in CSS 3 but that isn't supported widely enough yet. `center center` in tandem with `background-repeat: no-repeat` should do what you ask for - center the image. – Pekka Apr 15 '10 at 07:26
Guys, please try my code with a 1600x1200 on localhost, you will understand what I am trying to say. – X10nD Apr 15 '10 at 07:27
@Jean is your problem the re-sizing of the image? – Pekka Apr 15 '10 at 07:41
it could be the page content isnt big enough to display the content, add a `min-height` and `height` to the body CSS too to handle this. Lastly, you could use javascript to get the screen height and pick a correct image to display in the background of the body, so you would always see the correct image. – Mauro Apr 15 '10 at 07:43
If I remove the syntax background-repeat:no-repeat; background-position: center center; THen the image is displayed from left and tiled – X10nD Apr 15 '10 at 08:00
@Jean but why would you remove the syntax? – Pekka Apr 15 '10 at 08:02
3

@Jean ahh, I see now from your screen shot. You need to give the `body` a `min-height` of `100%` so it extends across the full screen. That may sort it. – Pekka Apr 15 '10 at 08:04
@pekka, it did sort out, but there is another problem now check http://www.jsfiddle.net/yWrQP/4/ – X10nD Apr 15 '10 at 08:11
@Jean can you describe the problem? I don't see it. – Pekka Apr 15 '10 at 08:17

score 7 · Answer 5 · answered Apr 04 '18 at 23:05

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;

html{
height:100%
}

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

score 4 · Answer 6 · edited May 23 '17 at 12:34

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.

'background:url(../images/images2.jpg) center center no-repeat;' does not work, since the syntax is wrong And the others do not work either — X10nD, Apr 15 '10 at 07:58

score 2 · Answer 7 · edited Sep 15 '13 at 08:46

2

Try this background-position: center top;

This will do the trick for you.

edited Sep 15 '13 at 08:46

n1ckolas

4,380
3
37
43

answered Sep 03 '13 at 18:26

Magnus

379
1
15

Stephan · Answer 8 · 2014-09-29T14:37:17.450

2

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)

edited Sep 29 '14 at 14:37

answered Sep 29 '14 at 14:34

Stephan

21
2

score 2 · Answer 9 · answered Apr 05 '17 at 15:59

2

simply replace

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

with

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

answered Apr 05 '17 at 15:59

Praveen

388
3
7

This repeated the image. On chrome, need center and no-repeat specified. – Garr Godfrey May 30 '22 at 18:50

score 2 · Answer 10 · answered Mar 17 '20 at 03:22

2

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;

answered Mar 17 '20 at 03:22

greenbeen

21
3

score 0 · Answer 11 · answered Jan 11 '15 at 13:18

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

score 0 · Answer 12 · answered Jul 22 '16 at 21:11

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

score -2 · Answer 13 · edited Aug 12 '15 at 13:31

-2

The only thing that worked for me is..

margin: 0 auto

edited Aug 12 '15 at 13:31

MarmiK

5,639
6
40
49

answered Aug 12 '15 at 12:15

plop

1

Centering a background image, using CSS

13 Answers13

Linked

Related