Background-image position, center center not working

Question

I'm trying to create a page with a centered background image and using the position center center. But instead of appearing centered both vertically and horizontally the image appears to extend vertically beyond the top of the page. Where/why am I going wrong?

<!DOCTYPE html>
<html>
<style>
body
{
background-image:url('tumbleweed.jpg');
background-repeat:no-repeat;
background-position:center center;
background-color:#EAEAEA;
}
</style>
</html>

Seems to be working fine here http://jsfiddle.net/rtw7h3ys/ – Akshay Nov 05 '14 at 15:25 — Akshay, Nov 05 '14 at 15:25

KimYC1223 · Answer 1 · 2020-07-30T06:50:01.743

Would you see the screen like below picture?

body{
  background-image:url(../IMG/BG/pizzaBackground.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

I think It's because you didn't declare 'height'.

Add 'height:100vh'style.

body{
  height: 100vh;    /* ADD STYLE ! */
  background-image:url(../IMG/BG/pizzaBackground.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

The reason for setting to 100vh is because the target is body tag.

If it's a different tag, use a different value.

Then this will be

And add 'margin:0px' style to remove the scroll.

body{
  margin: 0px;     /* ADD STYLE ! */
  height: 100vh;
  background-image:url(../IMG/BG/pizzaBackground.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

Then you can see

Thanks!

score 2 · Accepted Answer · answered Nov 05 '14 at 15:22

2

You can use cover

background-image:url('tumbleweed.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

http://jsfiddle.net/ou10gmfd/

answered Nov 05 '14 at 15:22

Stacker-flow

1,251
3
19
39

score 2 · Answer 3 · answered Nov 05 '14 at 15:23

2

Try this:

background-position: 50% 50%;

Or maybe you should try a space before the first center (could be an issue).

answered Nov 05 '14 at 15:23

koenest

29
1

This is just wrong. Space before the first value is not an issue. – Mario Nov 27 '17 at 15:37

score 0 · Answer 4 · answered Nov 05 '14 at 15:29

0

Most likely this is because your image is to large use background-size: cover; to cover the whole background of the body

answered Nov 05 '14 at 15:29

Samir Alley

81
2

Hasnain Raza · Answer 5 · 2021-06-30T09:08:30.597

-2

remove DOCTYPE html from your page and it will work fine. or use background-attachment: fixed;. then you do not have to remove DOCTYPE html

edited Jun 30 '21 at 09:08

answered Jun 30 '21 at 09:01

Hasnain Raza

1
1

The browser may automatically go into Quirks or Strict Mode when DOCTYPE is not present on the page. see https://stackoverflow.com/q/23230798/1363169 for insight. – kplus Jun 30 '21 at 18:41

Background-image position, center center not working

5 Answers5