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

Question

Tôi muốn căn giữa hình nền. Không có div sử dụng, đây là CSS phong cách:

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

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

Answer 1

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

Điều đó sẽ làm việc.

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

Khác hơn là 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ể min-height thà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%; 
} 

Answer 2

Hãy thử

background-position: center center; 

Answer 3

Có lỗi trong mã của bạn. Bạn đang sử dụng kết hợp cú pháp đầy đủ và ký pháp viết tắt trên thuộc tính background-image.Điều này gây ra không lặp lại bị bỏ qua vì nó không phải là giá trị hợp lệ cho thuộc tính hì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

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

EDIT: Đối với hình ảnh của bạn 'rộng' vấn đề, bạn có thể muốn xem xét this question's answer.

Answer 4

tôi sử dụng mã này, nó hoạt động thoải mái

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

Hãy thử điều này background-position: center top;

này sẽ làm các trick cho bạn.

Answer 6

Tôi nghĩ this là những gì đang bị truy nã:

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; 

Không theo chiều dọc tập trung hình nền khi sử dụng một html 4,01 DOCTYPE 'nghiêm ngặt'.

Thêm:

background-attachment: fixed; 

nên khắc phục vấn đề

(Vì vậy, Alexander là đúng)

Answer 8

nếu bạn không hài lòng với câu trả lời ở trên sau đó sử dụng này

* {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

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

margin: 0 auto 

Answer 10

Đã xảy ra sự cố tương tự. Đã sử dụng các thuộc tính hiển thị và lề và nó hoạt động.

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

Answer 11

chỉ đơn giản là thay thế

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

với

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