作者KanoLoa (卡)
看板Web_Design
標題[問題] CSS 背景圖片固定位置與縮放
時間Mon Jun 13 10:44:15 2016
各位大大好，小弟是新人，剛入門學習基礎前端css。
實作時想要做出下面效果的時候一直卡住，只好請教各位大大m(_ _)m
補充： 我想要的與這遊戲網站的效果一樣
http://ro.gameflier.com/index.asp
---------------------------
還請看示意圖：
http://imgur.com/f2GEaYo
我有一張背景圖，假設1000px。並且中間有個紅色方格區域約800px。
1. 當瀏覽器的瀏覽寬度小於800px的時候：
紅色區域的左邊線可以保持對齊瀏覽器的左邊。
縮放的剪裁區域會從紅色區域右方開始縮減。
2. 當瀏覽器寬度 > 800px ，並且不到1000 px時：
背景圖能平均至中，超出紅格區域的大小也平均分配在瀏覽器兩端。
-----------------------------------
我本來是在中間做一個div，設定寬度800浮動，即可讓內容達到我要的效果，
但是後面背景圖片就沒辦法做到我要的樣子，卡了一天 orz
希望有空的大大能幫我解惑，非常感謝。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 203.73.234.49
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1465785859.A.6D1.html
看起來很類似，我研究下怎麼把大大東西轉出來用，感謝。
3F：推 Frozenmouse: 昨天剛好有弄到類似的東西…最後是外層再包個滿版div 06/13 11:31
4F：→ Frozenmouse: ，把背景移到外面那層，內層的保持寬度並置中來解決 06/13 11:31
意思是開一層div放背景圖，裡面一層div保持寬度置中即可！？
6F：→ Frozenmouse: 不確定符不符合你要的XD 外面放背景的也要設最小寬度 06/14 06:17
天阿 您完美的解決了 XDDD 太感謝啦
※ 編輯: KanoLoa (203.73.234.49), 06/14/2016 14:19:05