html - 我不想让背景图片占据整页 CSS

Question

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

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

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

Answer 1

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