如何在CSS中調整大小的背景圖像？

-1

body { 
    background-image: url("image file"); 
    background-size: cover; 
    background-repeat: no-repeat; 
}

我已經找到了答案看下面。

你是什麼意思調整背景？在更改瀏覽器的大小時，背景將調整大小，或者您可以使用鼠標調整背景大小？ – tanjir

我的意思是我希望圖像在瀏覽器改變尺寸時始終在屏幕上完全可見。整個圖像不僅僅是窗口變化的一部分 –

@alexroberts你想讓圖像展開以覆蓋可見區域嗎？或者你想讓圖像保留其尺寸？如果你有一個你想要覆蓋屏幕的圖塊，請從你的代碼中移除'background-image：no-repeat'。否則，請參閱下面的答案。 –

隨着background-size:cover，背景會自動縮放與其父元素的大小，以覆蓋整個事情。

在這種情況下，要縮放或縮小，可以在body元素上設置寬度和高度。

2015-10-11 01:36:14

如果我調整窗口大小，它會將文本移動到圖像的右上角 –

你是什麼意思？沒有提到文字的帖子的一部分。 –

要移動正文中的文本，您可以添加「文本對齊」屬性，您可以在其中根據所需位置將其設置爲「中心」，「左」或「右」 –

使用此：

background-size: 100% 100%;

2015-10-11 02:02:22

這是我想要的，但所有的錯誤是，如果窗口太大，圖像不會伸展。屏幕的一部分將是白色的。 –

我已經更新了答案，我想這正是你想要的。 –

彈力水平和垂直方向：

background-size: 100% 100%;

彈力水平（保存圖像比）：

background-size: 100%; 
background-size: 100% auto; /* This is the same as above (included so you can see the similarities below). */

垂直拉伸（保存圖像比）：

background-size: auto 500px; /* If you use percentage (100%), you must set the height of the containing element. */

這裏是一個互動的網頁，在那裏你可以與背景大小屬性實驗：

2015-10-11 02:15:01

如果您只想縱向拉伸，該怎麼辦？ –

@alexroberts您可以通過處理「background-size」屬性的第二個值來垂直拉伸。例如，使用'background-size：100％800px;'如果要將寬度保持爲100％，但將圖像垂直拉伸至800像素的大小。 –

@alexroberts看看我剛添加到我的文章的鏈接。這將爲您提供一個簡單的「背景大小」屬性實踐經驗，我相信它會解決您可能遇到的許多問題。 –

我終於找到了答案都是我所要做的就是修改你的答案之一

body {background-image: url("image file"); 
background-size: 110% 130%; 
background-repeat:no-repeat;

感謝您的幫助。

2015-10-16 02:50:17

回答