-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
72 lines (65 loc) · 2.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html>
<head>
<title>Background-image size fixed cover which WORKS on iOS and any another mobile device.</title>
<style>
body:after{
content:"";
position:fixed; /* stretch a fixed position to the whole screen */
top:0;
height:100vh; /* fix for mobile browser address bar appearing disappearing */
left:0;
right:0;
z-index:-1; /* needed to keep in the background */
background: url(https://newevolutiondesigns.com/images/freebies/nature-hd-background-9.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p, pre {
background-color:rgba(255,255,255,0.9);
margin: 10px 20px;
padding:10px;
}
p.long {
height:2000px;
}
</style>
</head>
<body>
<p>
Background-image size fixed cover which WORKS on iOS and any another mobile device.
</p>
<pre>
body:after{
content:"";
position:fixed; /* stretch a fixed position to the whole screen */
top:0;
height:100vh; /* fix for mobile browser address bar appearing disappearing */
left:0;
right:0;
z-index:-1; /* needed to keep in the background */
background: url(https://newevolutiondesigns.com/images/freebies/nature-hd-background-9.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</pre>
<p>
<a href="https://thesved.github.io/fixed-cover-background/index-wrong.html">Click here</a> for seeing the normal behavior, which doesn't work properly.
</p>
<p>
<a href="https://github.com/thesved/fixed-cover-background" target="_blank">See Github repo</a>
</p>
<p>
More info <a href="http://stackoverflow.com/questions/24154666/background-image-size-cover-not-working-on-ios/43058483#43058483" target="_blank">at stackoverflow.com</a>
</p>
<p>
Live demo at <a href="https://www.doklist.com/" target="_blank">Doklist.com</a>, <a href="https://www.doklist.com.br/" target="_blank">Doklist.com.br</a>
</p>
<p class="long">
A very long paragraph to test how well this solution works.
</p>
</body>
</html>