Wyśrodkowanie obrazu tła za pomocą CSS

Question

Chcę wyśrodkować obraz tła. Nie ma div stosowane, to jest styl CSS:

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

Powyższe płytki CSS całym centrum i robi to, ale pół obraz nie widać, to po prostu rodzaj przesuwa się w górę. To, co chcę zrobić, to wyśrodkować obraz. Mogłem przyjąć na zdjęcie, aby zobaczyć nawet na ekranie 21" ?

Answer 1

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

To powinno działać.

Jeśli nie, to dlaczego nie zrobić div z obrazem i użytkowania z-index, aby uczynić go tłem? Znacznie łatwiej byłoby wyśrodkować niż obraz tła na ciele.

Inne niż to:

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 na min-height na 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%; 
} 

Answer 2

Spróbuj

background-position: center center; 

Answer 3

Wystąpił błąd w kodzie. Używa się kombinacji pełnej składni i skrótu notacji we właściwości background-image. Powoduje to ignorowanie no-repeat, ponieważ nie jest poprawną wartością właściwości background-image.

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

powinny stać się jednym z następujących czynności:

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

EDIT: Dla obrazu 'skalowanie' problem, warto spojrzeć na this question's answer.

Answer 4

używam tego kodu, to działa ładny

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

Answer 5

Spróbuj background-position: center top;

To załatwi za Ciebie.

Answer 6

myślę this jest to, co chciał:

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

Answer 7

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

Nie pionowo wyśrodkować obraz tła podczas korzystania z HTML 4.01 strict '' doctype.

dodania:

background-attachment: fixed; 

powinno rozwiązać problemu

(So Alexander ma rację)

Answer 8

jeśli nie jest zadowolony z odpowiedzi powyżej, a następnie użyć 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%; 
    } 

Answer 9

jedyną rzeczą, która zadziałała, jest ...

margin: 0 auto 

Answer 10

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

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

Answer 11

prostu zastąpić

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

z

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