角度5全屏不可移动,非伸展背景图像

时间:2018-03-01 00:12:51

标签: html css angular angular5

我有一个带有2个嵌套路由器插座的角度5应用程序,我想添加一个始终覆盖整个页面的背景图像。 因此,如果用户开始滚动,内容应该滚动,但背景图像应该始终填满整个背景而不会移动(并且不会改变大小或拉伸),无论导航的嵌套路由器插座有多深。

另外我想根据屏幕尺寸更改图片。 (@desktop,@ mobile)

所以我得到了:

<style>
   body, html {
     height: 100%;
   }
   .bg {
     background-image: url("backgroundImage.png");

     height: 100%;

     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
   }
</style>
<body>
   <div class="bg">
     <app-root></app-root>
   </div>
</body>

只要它最初用背景图像填充屏幕就可以了,但是如果嵌套组件变得太大而用户开始滚动,则图像将与其余内容一起滚动。

我可以添加什么来使其无法移动并始终全屏?

1 个答案:

答案 0 :(得分:1)

使用background-attachment: fixed;可以胜任。