Wyśrodkowanie obrazu tła za pomocą CSS

Chcę wyśrodkować obraz tła. Nie jest używany żaden element div, jest to styl CSS :

body{
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Powyższe kafelki CSS są wszędzie i wyśrodkowują, ale połowa obrazu nie jest widoczna, po prostu przesuwa się w górę. Chcę wyśrodkować obraz. Czy mogę dostosować obraz do wyświetlania nawet na ekranie 21 "?

background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;

To powinno działać.

Jeśli nie, dlaczego nie zrobić divz obrazem i użyć z-indexgo do ustawienia tła? Byłoby to znacznie łatwiejsze do wyśrodkowania niż obraz tła na ciele.

Poza tym spróbuj:

background-position: 0 100px;/*use a pixel value that will center it*/Albo myślę, że możesz użyć 50%, jeśli ustawiłeś swoje ciało min-heightna 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%;
}

Używam tego kodu, działa dobrze

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

Myślę, że to jest to, czego potrzebujemy:

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

Próbować

background-position: center center;

Lubię to:

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

W Twoim kodzie jest błąd. Używasz połączenia pełnej składni i notacji skróconej we właściwości background-image, co powoduje ignorowanie braku powtórzeń, ponieważ nie jest to poprawna wartość właściwości background-image.

body{   
    background-position:center;
    background-image:url(../images/images2.jpg) no-repeat;
}

Powinien stać się jednym z następujących:

body{
    background:url(../images/images2.jpg) center center no-repeat;
}

lub

body
{
    background-image: url(path-to-file/img.jpg);
    background-repeat:no-repeat;
    background-position: center center;
}

EDYCJA: W przypadku problemu ze skalowaniem obrazu możesz spojrzeć na odpowiedź na to pytanie .

Spróbuj tego background-position: center top;

To załatwi sprawę za Ciebie.

background-repeat:no-repeat;
background-position:center center;

Nie wyśrodkowuje w pionie obrazu tła w przypadku użycia typu dokumentu HTML 4.01 „STRICT”.

Dodanie:

background-attachment: fixed;

Powinno rozwiązać problem

(Więc Alexander ma rację)

po prostu wymień

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

z

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

jeśli nie jesteś zadowolony z powyższych odpowiedzi, użyj tego

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

    body
    {
        background-image: url("background.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80%;
    }

Miałem ten sam problem. Użyłem właściwości wyświetlania i marginesów i zadziałało.

.background-image {
  background: url('yourimage.jpg') no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: whateveryouwantpx;
  width: whateveryouwantpx;
}

background-position: center center;

nie działa dla mnie bez ...

background-attachment: fixed;

używając obu wyśrodkowanych mojego obrazu na osi X i Y.

background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

Jedyne, co mi pomogło, to ...

margin: 0 auto