Centering a background image, using CSS

Css

Css Problem Overview


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?

Css Solutions


Solution 1 - Css

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

Solution 2 - Css

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

Solution 3 - Css

I think this is what is wanted:

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

Solution 4 - Css

Try

background-position: center center;

Solution 5 - Css

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

Solution 6 - Css

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.

Solution 7 - Css

Try this background-position: center top;

This will do the trick for you.

Solution 8 - Css

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)

Solution 9 - Css

simply replace

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

with

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

Solution 10 - Css

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;



Solution 11 - Css

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

Solution 12 - Css

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

Solution 13 - Css

The only thing that worked for me is..

margin: 0 auto

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionX10nDView Question on Stackoverflow
Solution 1 - CssKyleView Answer on Stackoverflow
Solution 2 - Cssvictor MartinezView Answer on Stackoverflow
Solution 3 - CssCrabView Answer on Stackoverflow
Solution 4 - CssPekkaView Answer on Stackoverflow
Solution 5 - CssRonnie RoystonView Answer on Stackoverflow
Solution 6 - CssRob van GroenewoudView Answer on Stackoverflow
Solution 7 - CssMagnusView Answer on Stackoverflow
Solution 8 - CssStephanView Answer on Stackoverflow
Solution 9 - CssPraveenView Answer on Stackoverflow
Solution 10 - CssgreenbeenView Answer on Stackoverflow
Solution 11 - CssToye_BrainzView Answer on Stackoverflow
Solution 12 - CssRobert PaulView Answer on Stackoverflow
Solution 13 - CssplopView Answer on Stackoverflow