我不想背景圖片佔滿整個頁面的CSS

目前，我有以下的CSS，我不想要的背景圖像佔據屏幕的整個高度，但我想全寬我不想背景圖片佔滿整個頁面的CSS

.login-page, .register-page { 
    background: url('https:/image/ex.jpg'); 
    background-position: center; 
    background-size: cover;   
}

有沒有簡單的方法來做到這一點，或者有可能嗎？

來源

2017-09-27 Smac

您可以設置background-size: 100% 60px;對於完整寬度，您可以給出100％，對於高度，您可以指定要覆蓋多少。如果您指定auto，則會根據您的屏幕自動調整高度。

.login-page, .register-page { 
 
    background: url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/blue-background-with-reflective-lines_-13idtdxs__F0000.png"); 
 
    background-size: 100% auto; 
 
    background-repeat: no-repeat; 
 
    padding-top: 40px; 
 
}

<div class="register-page"> 
 
</div>

來源

2017-09-27 08:46:41 nabanita

這正是我想要的，但我不希望圖像伸展到這個尺寸，如果這是有道理的？ – Smac

就像我想要一個特定的高度，然後圖像來覆蓋這個高度] – Smac

好吧..所以在這種情況下，你可以使用背景大小：100％自動;這將自動進行。我已經更新了片段以及。 – nabanita

您需要將background-size屬性更改從cover到100% auto：

.login-page, .register-page { 
    background: url('https:/image/ex.jpg'); 
    background-position: center; 
    background-size: 100% auto;   
}

這意味着：100%寬度和auto的高度。

來源

2017-09-27 08:31:34

給background-size: 100% auto;。

來源

2017-09-27 08:32:03

您可以爲dom設置width: 100%;background-size: 100% auto;，背景圖像將展開爲相對高度，指的是圖像的分辨率。

來源

2017-09-27 08:32:15 JiangangXiong

是啊，你可以使用background-size: 100% auto;，也許添加一些background-repeat: no-repeat;

這裏是我的小提琴例子

https://jsfiddle.net/6w80jfc3/

好運...

來源

2017-09-27 08:53:42 JeansBolong

我不想背景圖片佔滿整個頁面的CSS

回答

相關問題