Hi all,
Issue
I cannot make the “Backstretch” jQuery plugin work for me.
For further information about the plugin see developer Scott Robbins’ Backstretch webpage and the [URL=“https://github.com/srobbin/jquery-backstretch#readme”]github Backstretch read me.
To rule out any issues with my own image, I’m first trying to make the query work with the Backstretch demo image (link to path).
As the Backstretch tutorial suggests, I have positioned the query just above the closing BODY tag.
I cannot see what I’ve done wrong. Also, because I have no understanding of Javascript, I’m unable to troubleshoot this. For your reference I’ve attached the HTML and CSS that I’m trying to apply the jQuery with.
Here’s my HTML
<!DOCTYPE html>
<html>
<head>
<title>Beijing Cottage | Chinese Restaurant & Takeaway, Croydon, London</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="logo">
<h1>Beijing Cottage</h1>
</div>
<ul id="navbar">
<li><a href="menu.html">Menu</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="find.html">Find Us</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
<div id="content">
<div id="lcol">
<h2>Croydon's favourite Chinese restaurant and takeaway</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed quam sit amet arcu volutpat mattis. Morbi mauris nibh, euismod id bibendum ac, iaculis quis augue. Aliquam scelerisque purus et leo pellentesque pellentesque.</p>
</div>
<div id="ccol">
<h2>Croydon's favourite Chinese restaurant and takeaway</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed quam sit amet arcu volutpat mattis. Morbi mauris nibh, euismod id bibendum ac, iaculis quis augue. Aliquam scelerisque purus et leo pellentesque pellentesque.</p>
</div>
<div id="rcol">
<h2>Croydon's favourite Chinese restaurant and takeaway</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed quam sit amet arcu volutpat mattis. Morbi mauris nibh, euismod id bibendum ac, iaculis quis augue. Aliquam scelerisque purus et leo pellentesque pellentesque.</p>
</div>
</div>
<div id="footer">
<div id="contact">
<h4>Telephone</h4>
<p>020 8688 2046</p>
<p>or</p>
<p>020 8688 1092</p>
<p>We regret to say to you <em>can't</em> reach us via email. Don't be shy about calling! We promise you'll hear a happy, great English-speaking voice if you phone anytime during our opening hours.</p>
</div>
<div id="location">
<h4>Location</h4>
<p>49 Southend, Croydon, CR0 1BF</p>
<p><a href="find.html">Info about parking, directions and public transport can be found on our Find Us page</a></p>
</div>
<div id="hours">
<table id="schedule" summary="Restaurant opening hours">
<caption>Opening Hours</caption>
<thead>
<tr>
<th></th>
<th class="opening" scope="col">Lunch</th>
<th class="opening" scope="col">Dinner</th>
</tr>
</thead>
<tbody>
<tr>
<th class="day" scope="row">Monday</th>
<td>12:00 - 14:30</td>
<td>18:00 - 23:30</td>
</tr>
<tr>
<th class="day" scope="row">Tuesday</th>
<td>12:00 - 14:30</td>
<td>18:00 - 23:30</td>
</tr>
<tr>
<th class="day" scope="row">Wednesday</th>
<td>12:00 - 14:30</td>
<td>18:00 - 23:30</td>
</tr>
<tr>
<th class="day" scope="row">Thursday</th>
<td>12:00 - 14:30</td>
<td>18:00 - 23:30</td>
</tr>
<tr>
<th class="day" scope="row">Friday</th>
<td>12:00 - 14:30</td>
<td>18:00 - 23:30</td>
</tr>
<tr>
<th class="day" scope="row">Saturday</th>
<td>12:00 - 14:30</td>
<td>18:00 - midnight</td>
</tr>
<tr>
<th class="day" scope="row">Sunday</th>
<td>closed</td>
<td>18:00 - midnight</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
</script>
</body>
</html>
Here’s my CSS
/************************************************
body
************************************************/
body {
margin: 0;
padding: 0;
}
/************************************************
masthead
************************************************/
#logo {
overflow: hidden;
width: 7em;
margin-left: 4em;
padding: 0em 1em 0em 1em;
background-color: black;
}
h1 {
float: left;
margin: 0;
color: #FFFFFF;
padding: 3em 0em 3em 0em;
background-color: black;
border-style: solid;
border-width: 0em 0.1em 0em 0.1em;
border-color: white;
width: 4.5em;
font: Helvetica;
font-size: 1.5em;
text-align: center;
}
#navbar {
background-color: black;
margin: 2em 0em 8em 0em;
padding: 1em 0em 1em 8em;
font: myriad;
font-size: 1em;
text-transform: uppercase;
list-style: none;
text-align: center;
}
#navbar li {
display: inline;
}
#navbar a {
display: block-inline;
text-decoration: none;
padding: 0.2em;
margin: 0.5em 0.5em 0.5em 0.5em;
}
#navbar a:link {color: white;} /* unvisited link */
#navbar a:visited {color:white;} /* visited link */
#navbar a:hover {color: purple;} /* mouse over link */
#navbar a:active {color: red;} /* selected link */
/************************************************
content
************************************************/
#content {
overflow: hidden;
margin: 0 auto;
background-color: pink;
padding: 2em;
width: 45em;
}
#lcol {
float: left;
width: 15em;
background-color: yellow;
}
#ccol {
float: left;
width: 15em;
background-color: red;
}
#rcol {
width: 15em;
float: left;
background-color: blue;
}
#lcol rcol h2 {
font: myriad;
font-size: 0.9em;
color: black;
}
#lcol rcol p {
font: myriad;
font-size: 0.6em;
color: black;
}
/************************************************
footer
************************************************/
#footer {
clear: both;
overflow: hidden;
margin: 0 auto;
margin-top: 5em;
background-color: pink;
padding: 2em;
width: 45em;
}
#contact {
float: left;
width: 15em;
background-color: white;
}
#location {
float: left;
width: 15em;
background-color: white;
}
#hours {
float: left;
width: 15em;
background-color: white;
border-collapse: collapse;
}
.day {
text-align: left;
}
Background
After extensive Googling, the “Backstretch” jQuery plugin appears to be the best solution for a fluid, responsive design oriented around a large background image.
About me
I’m a novice trying to go about website design the right way. Although I consider myself literate in HTML and CSS, I have no idea about JavaScript.
Any help would be kindly received.