I've seen a few topics of this on the internet, however none were relevant in solving my problem. I'm currently using the jQuery plugin Backstretch and have successfully implemented it as a background for the whole page. However, I'd like to use it within a div with a fixed height. So rather than taking up the whole page, it sort of acts as an image slider.
I used the documentation off of Backstretch's Github to try and implement it but no luck. The div itself is sectioned off (there's a big white space where it should be) but no image.
Thanks for the help!
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Home</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Crimson+Text">
<script src="jquery.js"></script>
<script src="jquery.backstretch.js"></script>
</head>
<body>
<div class="backstretch">
<script>
$(".foo").backstretch("test1.jpg");
</script>
</div>
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</body>
</html>
With styles:
.backstretch{
width: 100%;
height: 500px;
}
It seems that you're selecting a non-existent element (.foo) for use with backstretch.
Instead of this:
$(".foo").backstretch("test1.jpg");
Try this:
$(".backstretch").backstretch("test1.jpg");