I used a full page background jquery image plugin called backstretch. After I was done making the site I wanted to add it to codepen.io, but the image for the full page background won't show up.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>Oregon</title>
<link href='https://fonts.googleapis.com/css? family=Raleway%7cIndie+Flower' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="pics.html">Pics</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="main-content">
<h1>Vacation In Oregon</h1>
<a class="oregon" href="http://www.oregon.gov/pages/index.aspx" target="_blank">
<p>Oregon</p>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script>
$.backstretch("https://devinsabbatical.files.wordpress.com/2012/09/3-mount-jefferson.jpg");
</script>
</body>
Can anyone explain to me how to get the image to show up on codepen.io? If it helps the image is the last part of my html that begins with $.backstrech(" https://devinsabbatical.files.wordpress.com/2012/09/3-mount-jefferson.jpg ");
Here's a link to my codepen: http://codepen.io/mike316/pen/Vjrjzg
You need add url to script, not local path:
this is your line: <script src="js/jquery.backstretch.min.js"></script>
Change to this (on your codepen source): <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.