I want to show a full-screen image before my AngularJS website is fully bootstrapped.
One way is to use ng-cloak.
This is an example to show a line of words.
I tried to make a full-screen image instead
[ng-cloak].splash {
/* The image used */
background-image: url("https://media.thetab.com/blogs.dir/13/files/2017/02/nice-guy-2.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
http://plnkr.co/edit/OTYwqGehVAsw5R8V?preview
But it did not work. Does anyone know why?
You missed display: block !important; in [ng-cloak].splash
[ng-cloak].splash {
/* The image used */
background-image: url("https://media.thetab.com/blogs.dir/13/files/2017/02/nice-guy-2.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: block !important;
}