Một cách tốt hơn để sử dụng toàn bộ hình ảnh làm nền trang web bằng cách sử dụng CSS và vẫn phục vụ cho các kích thước màn hình khác nhau? (Như about.me)

Question

Hiện nay tôi đang sử dụng này:

HTML:

<div id="container"> 
    <img src="x.jpg" id="bg" /> 
    <div id="content"> 
    <h1>Welcome to my website.</h1> 
    <p>Boo!</p> 
    </div> 
</div> 

CSS:

#bg{ 
position:absolute; 
top:0; 
left:0; 
height:100%; 
z-index:10; 
} 

#container{ 
/* max values provided due to the max size of the image available with me(1200x800) */ 
max-width:1200px; 
max-height:800px; 
} 

#content{ 
position:absolute; 
top:10px; 
left:100px; 
z-index:100; 
} 

Ưu điểm ở đây là tôi không sử dụng bất kỳ Javascript nào cả. Nhưng sau đó, các yếu tố vị trí tuyệt đối ly trở thành một cơn ác mộng khi được xem trên các màn hình khác nhau.

Hiện tại giải pháp tôi có là viết và định vị các phần tử này theo kích thước màn hình khác nhau (ví dụ: 1024x768 sẽ có giá trị hàng đầu của nội dung id là 10px trong khi 1280x800 sẽ có thứ gì đó như trên: 25px; v.v ..) và lưu trữ chúng dưới dạng tệp css riêng biệt để tôi có thể tải CSS phù hợp trong khi tải trang. Tôi cảm thấy điều này tốn thời gian và có lẽ cũng hiệu quả. Sử dụng giá trị phần trăm là một tùy chọn mà tôi chưa khám phá. Nếu bạn biết một giải pháp thanh lịch, hoặc làm thế nào các chàng trai lớn tại about.me làm điều đó, nó sẽ giúp đỡ.

Cảm ơn bạn.

Answer 1

Bạn đã thử sử dụng background-image trên body với một trong các giá trị background-size? Bạn có thể sử dụng cover hoặc có lẽ 100% 100% tùy theo nhu cầu của bạn.

Demo: http://jsfiddle.net/ThinkingStiff/UBaN6/

body { 
    background-image: url('http://thinkingstiff.com/images/matt.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
}