Change homepage splash image to background image that keeps its place before loading.
This commit is contained in:
parent
312818d71a
commit
e9a052870c
|
@ -96,11 +96,15 @@
|
|||
}
|
||||
|
||||
&-illustration {
|
||||
max-width: 640px;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 640px;
|
||||
background-size: contain;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-top: 86.3%; // Aspect ratio of img
|
||||
}
|
||||
|
||||
@media @thin-query {
|
||||
|
|
|
@ -32,9 +32,10 @@ const HomeIntro: React.SFC<Props> = ({ t, authUser }) => (
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="HomeIntro-illustration">
|
||||
<img src={HomeIllustration} />
|
||||
</div>
|
||||
<div
|
||||
className="HomeIntro-illustration"
|
||||
style={{ backgroundImage: `url(${HomeIllustration})` }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
Loading…
Reference in New Issue