Question

我目前有以下css，我不希望背景图像占据屏幕的整个高度，但我想要全宽

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

有没有简单的方法可以做到这一点还是可能？

Answer 1

您需要将background-size属性从cover更改为100% auto：

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

这意味着：100%宽度和auto的高度。

Answer 2

您可以设置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>

Answer 3

给background-size: 100% auto;。

Answer 4

您可以为dom设置width: 100%;background-size: 100% auto;，背景图像将扩展为相对高度，参考图像的分辨率。

Answer 5

是的，您可以使用background-size: 100% auto;并可能添加一些background-repeat: no-repeat;

这是我的小提琴示例

https://jsfiddle.net/6w80jfc3/

祝你好运......

我不希望背景图像占用整页CSS

5 个答案: