background 載入背景圖

發表於 2022-07-22 分類於 HTML

在 body 上載入背景圖片

寫法有很多種，以下是其中一種：

<body>
    <div class="box"></div>
</body>

我設成滿版

.box {
    width: 100%;
    height: 800px;
    background-image: url(/img/Samsung_Logo.png);
}

抱歉哦，我很喜歡三星這個圖，如有傷眼，敬請見諒。
如有侵權敬請告知!!!

如果有喜歡的背景顏色，可以裁切一條長條型，可以是橫的也可以是直的，然後用重覆的手法，讓它佈滿整個畫面，這最大的好處就是在載入圖片時，網頁負擔較輕，速度也比載入一大張的圖片來的快多了。

如果不想重覆的話，css 可以這樣寫：

.box {
    width: 100%;
    height: 800px;
    background-image: url(/img/Samsung_Logo.png);
    background-repeat: no-repeat;
}