我不想背景图片占满整个页面的CSS

问题描述：

目前，我有以下的CSS，我不想要的背景图像占据屏幕的整个高度，但我想全宽我不想背景图片占满整个页面的CSS

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

有没有简单的方法来做到这一点，或者有可能吗？

答

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

这正是我想要的，但我不希望图像伸展到这个尺寸，如果这是有道理的？ – 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的高度。

答

给background-size: 100% auto;。

答

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

答

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

这里是我的小提琴例子

https://jsfiddle.net/6w80jfc3/

好运...

我不想背景图片占满整个页面的CSS

相关推荐