CSS và kích thước màn hình khác nhau?

Question

Tôi đang làm một trang web (WIP). Tôi gặp phải một số vấn đề về CSS, hy vọng các bạn có thể giúp tôi.

tình hình hiện tại của tôi:

• Tôi có hình ảnh sáng, cho phép gọi nó là "bg.png" với chiều rộng khoảng 2500px, và ở trung tâm của hình nền có biểu tượng của tôi.
• Trang web của tôi nên nhắm mục tiêu tất cả người dùng có kích thước (từ nhỏ 800 x 600 đến 2400 x XXX).

vấn đề của tôi:

• Làm thế nào để tập trung hình nền (bg.png), do đó logo luôn vị trí trong trung tâm (theo chiều ngang) của kích thước khác nhau của màn hình màn hình?

Answer 1

body { background: url('bg.png') 50% 50% no-repeat; } 

này sẽ đặt hình ảnh ở kích thước đầy đủ ở trung tâm của trang, và người dùng sẽ thấy càng nhiều hình nền này như giấy phép cửa sổ trình duyệt của họ.

Answer 2

Nếu nó chỉ là một tập tin biểu tượng bạn có thể sử dụng

<style> 
img 
{ 
    position:absolute; 
    left:-50%; 
    top:-50%; 
    z-index:-1; 
} 
</style> 

Answer 3

#your_img { 
    width: 2500px; //In example 2500px 
    margin: 50%; 
    padding: -1250px; // 2500 divided by 2 
} 

Nó có lẽ không làm việc trên trình duyệt Internet Explorer, nhưng bạn có thể sử dụng một ít hack với position: absolute, như trên

Answer 4

#your_img { 

    position: absolute; 
    left: 50%; 
    margin: -1250px; 
} 

Giải pháp này là cần thiết, khi bạn đặt phần tử img vào hộp khác. Nhưng hãy cẩn thận - nó có thể thay đổi kích thước của hộp của cha mẹ.