網頁設計中，backgroung-img 有關問題

html css background backgroung image

abc 2022-06-28 21:08:53 ‧ 1181 瀏覽

想要詢問一下，我目前想要使用background image，在電腦觀看時會如圖一。
但是當我使用手機觀看時，就會變成圖二。

以下為我的code:

HTML:
HTML

css:
css

我一直找不出來到底是甚麼地方出了問題，麻煩各位大神了~

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

yhosutun2490

iT邦新手 3 級 ‧ 2022-06-28 21:47:11

最佳解答

算是現在滿常見回應式網頁式設計(RWD)，簡單來說因為畫面尺寸不同，通常是排版轉換居多，例如原本4格一排畫面，在手機裡變成單格排排站，之後你有興趣可以深入研究flex彈性排版。

你可以用CSS Media Query簡單動手試看看

原本的CSS裡就寫你原本的背景圖片，當螢幕小於此寬度720px時會抽換圖片

@media screen and (max-width:720px) {
.background-img : url('你想換圖片的網址');
}
max-width: 當螢幕小於此寬度時會生效，手機大概是720px
min-width: 當螢幕大於此寬度時會生效

或者chrome開一下開發者模式，有不同手機型號螢幕寬度可以確認一下

abc iT邦新手 5 級 ‧ 2022-06-29 11:10:12 檢舉

謝謝您，原來是要換圖片。

立即登入回答