This repository has been archived by the owner on Nov 19, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (100 loc) · 5.86 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="bgSize-polyfil : a jQuery polyfil for the CSS background-size property" />
<title>bgSize jQuery plugin demo - by @0m4r </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="bgSize-polyfil.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<style type="text/css">
*, *:before, body:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#content {
text-align: center;
color: #333;
}
#content div{
width: 600px;
height: 400px;
display: inline-block;
background-repeat: no-repeat;
border: medium none;
overflow: auto;
border: 1px solid green;
}
#content div > div {
border: none;
text-align: left;
}
#content div.css {
background-image: url('bgImage.jpg');
border: 1px solid red;
}
#content div.contain{
background-image: url('bgImage.png');
background-size: contain;
}
#content div.cover{
background-size: cover;
}
</style>
</head>
<body>
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/0m4r/bgSize-polyfil">View on GitHub</a>
<h1 id="project_title">bgSize-polyfil</h1>
<h2 id="project_tagline">a jQuery polyfil for the CSS background-size property</h2>
<section id="downloads">
<a class="zip_download_link" href="https://github.com/0m4r/bgSize-polyfil/zipball/master">Download this project as a .zip file</a>
<a class="tar_download_link" href="https://github.com/0m4r/bgSize-polyfil/tarball/master">Download this project as a tar.gz file</a>
</section>
</header>
</div>
<div id="content">
<h1>background-size: 'cover'</h1>
<div class="js-cover">
<h2>the background is applied via js</h2>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</div>
<div class="css cover">
<h2>the background is applied via css</h2>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</div>
<h1>background-size: 'contain'</h1>
<div class="js-contain">
<h2>the background is applied via js</h2>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</div>
<div class="css contain">
<h2>the background is applied via css</h2>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</div>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">bgSize-polyfil maintained by <a href="https://github.com/0m4r">0m4r</a></p>
</footer>
</div>
</body>
<script type="text/javascript">
$(function(){
$('.js-contain').bgSize({
backgroundImage: 'bgImage.png',
force: true,
backgroundSize: 'contain'
});
$('.js-cover').bgSize('cover', {
backgroundImage: 'bgImage.jpg',
force: true,
backgroundSize: 'cover'
});
})
</script>
</html>