Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Milan Milosevic
Milan Milosevic
6,647 Points

CSS - how to import simple JQuery plugin into my css

So, I want to put a pic as my body-div background, and I want it to cover entire div (screen), but if i use the background-size: cover property when my page has a lot of content and needs to slide down, pic is very streched.

So i've found this simple plugin $.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

that should do it but i dont know how to connect it with my css and that background pic i've set. ?

2 Answers

Rand Seay
Rand Seay
13,975 Points

As Cameron said, there are ways to get what you want without using this plugin. However, if you are set on using it, I found this setup snippet in the README.md file in github repository for this plugin.

You just have to Include the jQuery library (version 1.7 or newer) and Backstretch plugin files in your webpage, preferably at the bottom of the page, before the closing </body> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
  // To attach Backstrech as the body's background
  $.backstretch("path/to/image.jpg");

  // You may also attach Backstretch to a block-level element
  $(".foo").backstretch("path/to/image.jpg");

  // Or, to start a slideshow, just pass in an array of images
  $(".foo").backstretch([
    "path/to/image.jpg",
    "path/to/image2.jpg",
    "path/to/image3.jpg"    
  ], {duration: 4000});
</script>
Cameron Cottle
Cameron Cottle
13,742 Points
Cameron Cottle
Cameron Cottle
13,742 Points

You could also try using background-attachment: fixed; which keeps the image in the same place relative to the browser.