Căn giữa một hình nền, sử dụng CSS

Tôi muốn tập trung vào một hình ảnh nền. Không có div được sử dụng, đây là kiểu CSS :

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

Các gạch CSS ở trên bao quanh và tập trung vào nó, nhưng một nửa hình ảnh không được nhìn thấy, nó chỉ là loại di chuyển lên. Những gì tôi muốn làm là trung tâm hình ảnh. Tôi có thể chấp nhận hình ảnh để xem ngay cả trên màn hình 21 "không?

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

Cần làm việc.

Nếu không, tại sao không làm cho một divhình ảnh và sử dụng z-indexđể làm cho nó nền? Điều này sẽ dễ dàng tập trung hơn nhiều so với một hình ảnh nền trên cơ thể.

Khác với thử đó:

background-position: 0 100px;/*use a pixel value that will center it*/Hoặc tôi nghĩ bạn có thể sử dụng 50% nếu bạn đã đặt cơ thể của mình min-heightthành 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%;
}

Tôi sử dụng mã này, nó hoạt động tốt

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

Tôi nghĩ rằng đây là những gì đang muốn:

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

Thử

background-position: center center;

Như thế này:

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

Có lỗi trong mã của bạn. Bạn đang sử dụng kết hợp đầy đủ cú pháp và ký hiệu viết tắt trên thuộc tính hình ảnh nền. Điều này khiến cho việc không lặp lại bị bỏ qua, vì đó không phải là giá trị hợp lệ cho thuộc tính hình ảnh nền.

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

Nên trở thành một trong những điều sau đây:

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

hoặc là

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

EDIT: Đối với vấn đề 'chia tỷ lệ' hình ảnh của bạn, bạn có thể muốn xem câu trả lời của câu hỏi này .

Thử cái này background-position: center top;

Điều này sẽ làm cho các mẹo cho bạn.

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

Không định tâm theo chiều dọc của hình nền khi sử dụng loại tài liệu html 4.01 'STRICT'.

Thêm:

background-attachment: fixed;

Nên khắc phục sự cố

(Vậy Alexander nói đúng)

chỉ cần thay thế

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

với

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

Nếu bạn không hài lòng với câu trả lời ở trên thì hãy sử dụng

    * {margin: 0;padding: 0;}

    html
    {
        height: 100%;
    }

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

Có cùng một vấn đề. Được sử dụng hiển thị và thuộc tính lề và nó đã làm việc.

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

background-position: center center;

không làm việc cho tôi mà không ...

background-attachment: fixed;

sử dụng cả hình ảnh trung tâm của tôi trên trục x và y

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

Điều duy nhất làm việc cho tôi là ..

margin: 0 auto