Replaced existing images with images from unsplash.com

README.md

@@ -84,3 +84,7 @@ Updates the sidebar's height. Use this if the background isn't showing properly,
 ### minWidth
 
 The sidebar returns to normal if its width is below this value. Useful for responsive designs. Defaults to **0**.
+
+## Credits
+
+Stock photos courtesy of [Unsplash.com](https://unsplash.com/)

examples/3-columns.html

@@ -66,7 +66,7 @@ <h2>Content</h2>
 						inciderint, consetetur voluptatibus pro et, te qui verear assentior.
 					</p>
 					<p>
-						<img src="http://lorempixel.com/800/600?v1">
+						<div class="image" style="height: 600px; background-image: url('images/photo-1453165549043-d43505de900d.jpg');"></div>
 					</p>
 					<p>
 						Ne sea vitae admodum, dicant tritani definiebas id quo, ei eam possim oblique. In
@@ -80,7 +80,7 @@ <h2>Content</h2>
 						et usu. Id graece probatus contentiones nam, natum legimus an quo.
 					</p>
 					<p>
-						<img src="http://lorempixel.com/800/600?v2">
+						<div class="image" style="height: 600px; background-image: url('images/photo-1465328610639-388f315eb31b.jpg');"></div>
 					</p>
 					<p>
 						Nam ea bonorum consetetur conclusionemque, sonet salutatus ea nam. Vis tale minim
@@ -94,7 +94,7 @@ <h2>Content</h2>
 						deseruisse referrentur.
 					</p>
 					<p>
-						<img src="http://lorempixel.com/800/600?v3">
+						<div class="image" style="height: 600px; background-image: url('images/photo-1429593886847-3cc52983f919.jpg');"></div>
 					</p>
 					<p>
 						Ei rebum movet diceret per. In autem novum voluptatibus quo. Ne nec bonorum
@@ -109,7 +109,7 @@ <h2>Content</h2>
 						pertinax no, quando graeco pro in, id quo timeam erroribus.
 					</p>
 					<p>
-						<img src="http://lorempixel.com/800/600?v4">
+						<div class="image" style="height: 600px; background-image: url('images/photo-1461016951828-c09537329b3a.jpg');"></div>
 					</p>
 					<p>
 						Vim ea euripidis intellegebat, accumsan adolescens quaerendum qui ut, ei unum viris
@@ -124,7 +124,7 @@ <h2>Content</h2>
 						oporteat, volumus tincidunt vix cu.
 					</p>
 					<p>
-						<img src="http://lorempixel.com/800/600?v5">
+						<div class="image" style="height: 600px; background-image: url('images/photo-1465328610639-388f315eb31b.jpg');"></div>
 					</p>
 					<p>
 						Putant possim democritum no has. Id eam decore inimicus, adhuc probatus
@@ -152,7 +152,7 @@ <h2>Right Sidebar</h2>
 							deseruisse referrentur.
 						</p>
 						<p>
-						<img src="http://lorempixel.com/200/150?v2">
+						<div class="image" style="height: 200px; background-image: url('images/photo-1429593886847-3cc52983f919.jpg');"></div>
 						</p>
 					</div>
 
@@ -164,7 +164,7 @@ <h2>Right Sidebar</h2>
 							an, ius mutat quidam an.
 						</p>
 						<p>
-						<img src="http://lorempixel.com/200/150?v3">
+						<div class="image" style="height: 150px; background-image: url('images/photo-1461016951828-c09537329b3a.jpg');"></div>
 						</p>
 					</div>
 
@@ -176,7 +176,7 @@ <h2>Right Sidebar</h2>
 							pertinax no, quando graeco pro in, id quo timeam erroribus.
 						</p>
 						<p>
-						<img src="http://lorempixel.com/200/150?v4">
+						<div class="image" style="height: 150px; background-image: url('images/photo-1453165549043-d43505de900d.jpg');"></div>
 						</p>
 					</div>
 				</div>
@@ -185,7 +185,7 @@ <h2>Right Sidebar</h2>
 
 		<div class="footer">
 			<p>
-				<img src="http://lorempixel.com/1200/900">
+				<div class="image" style="height: 900px; background-image: url('images/photo-1461016951828-c09537329b3a.jpg');"></div>
 			</p>
 		</div>
 

examples/4-columns.html

@@ -43,7 +43,7 @@ <h2>Column 1</h2>
 							</p>
 
 							<p>
-								<img src="http://lorempixel.com/210/1200">
+								<div class="image" style="height: 1200px; background-image: url('images/photo-1429593886847-3cc52983f919.jpg');"></div>
 							</p>
 
 							<p>
@@ -67,7 +67,7 @@ <h2>Column 2</h2>
 							</p>
 
 							<p>
-								<img src="http://lorempixel.com/210/1800">
+								<div class="image" style="height: 1800px; background-image: url('images/photo-1465328610639-388f315eb31b.jpg');"></div>
 							</p>
 
 							<p>
@@ -94,7 +94,7 @@ <h2>Column 3</h2>
 							</p>
 
 							<p>
-								<img src="http://lorempixel.com/210/600">
+								<div class="image" style="height: 600px; background-image: url('images/photo-1461016951828-c09537329b3a.jpg');"></div>
 							</p>
 
 							<p>
@@ -117,7 +117,7 @@ <h2>Column 4</h2>
 							</p>
 
 							<p>
-								<img src="http://lorempixel.com/210/100">
+								<div class="image" style="height: 100px; background-image: url('images/photo-1453165549043-d43505de900d.jpg');"></div>
 							</p>
 						</div>
 					</div>
@@ -127,7 +127,7 @@ <h2>Column 4</h2>
 
 		<div class="footer">
 			<p>
-				<img src="http://lorempixel.com/1200/900">
+				<img src="images/photo-1461016951828-c09537329b3a.jpg">
 			</p>
 		</div>
 

examples/foundation.html

@@ -48,15 +48,15 @@ <h1>Theia Sticky Sidebar - <a href="http://foundation.zurb.com/">Foundation</a>
                 </div>
 
                 <div class="small-3 columns">
-                    <div style="height: 500px;"></div>
+                    <div style="height: 800px;"></div>
                 </div>
             </div>
         </section>
 
         <footer>
             <div class="row">
                 <div class="small-12 columns">
-                    <div style="height: 200px;"></div>
+                    <div style="height: 400px;"></div>
                 </div>
             </div>
         </footer>

examples/style.css

@@ -27,6 +27,12 @@ img {
 	border-radius: 5px;
 }
 
+.image {
+	background-size: cover;
+        background-position: center center;
+	border-radius: 5px;
+}
+
 p {
 	margin: 30px 0;
 }