正確調整用於全寬背景的圖像大小

Question

我正在尋找一些關於如何將圖像用作頁面背景部分的說明。例如，在具有固定大小的內容部分的可變寬度設計中，通常將背景圖像附加到頁面主體，然後將跨越完整瀏覽器寬度的附加圖像設置爲（居中）背景圖像在額外的div。

我大部分都明白這是如何工作的，但我正在尋找製作圖像的寬度的指導。我見過使用4000像素寬背景的網站，甚至是8000像素寬的背景，比任何用戶的瀏覽器窗口都要寬。

這種技術是否依賴於一些潛在的怪癖，是什麼驅動大量的寬度？

我也很好奇背後爲什麼div的背景圖像能夠落在頁面上元素流的其餘部分之外的邏輯。再次，我知道它可行，但我很好奇爲什麼。

Answer 1

當使用大照片作爲背景圖片，我不會去大於2560x1440px，這是一個27" 的iMac屏幕分辨率：http://support.apple.com/kb/sp623 1366x768px是最常見的顯示器分辨率，其次是1920x1080px：http://www.w3schools.com/browsers/browsers_resolution_higher.asp。

如果你有一個固定寬度的內容部分，你想要一個圖像來填充該部分，使圖像的大小和使用CSS來縮放：http://css-tricks.com/perfect-full-page-background-image/。我假設你正在使用一張照片對於背景圖片而不是重複圖案，在這種情況下，您只需將圖片縮放到圖案的大小，然後重複。