4

I am trying to implement Jquery Anystretch into my website and have been unsuccessful in getting it to work. Jquery Anystretch will allow me to have a full image background that resizes. Below is what I have in place so far. Any help would be great. The website is http://www.jobspark.ca

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="/jquery.anystretch.min.js"></script>

<script type="text/javascript"> $.anystretch("/storage/fullimagebackground2.jpg", {speed: 150}); </script>

Here is Github link the https://github.com/danmillar/jquery-anystretch

5
  • 1
    You have incorrect path to jquery.anystretch.min.js. (jobspark.ca/jquery.anystretch.min.js)
    – Inferpse
    Nov 25, 2012 at 9:38
  • Thank you so much. Sorry I missed that error!
    – Chris S
    Nov 25, 2012 at 16:00
  • @Inferpse I just had one last question. I would like to speed up the loading of the background image. Right now it is at 150. What are the restrictions to speeding this up. I would like it to load as fast as possible. Thanks again!
    – Chris S
    Nov 25, 2012 at 22:57
  • 1
    Optimize your background image (save with less quality). Your image now is 1mb size. Add loader or black background on <body> to make background appearence smoother. Setup cache on your server. There are many ways to speed up this.
    – Inferpse
    Nov 26, 2012 at 9:21
  • Thanks for the advise. I was able to get my background image down to 141KB and added a darker color to the background color. It seems to have made a difference. I will look into these other ways to speed things up. jobspark.ca
    – Chris S
    Nov 27, 2012 at 2:02
2

I don't get why you want use javascript for a full page background, becouse browsers might have javascript turned off. There are also CSS solutions for this.

You might want to read the following article on CSS tricks on this subject, they also cover the jQuery approach.

http://css-tricks.com/perfect-full-page-background-image/

1

Rofavadeka is right, just use CSS if you're trying to make a full screen stretched background. Just write an image tag like this:

<img src="..." style="position:fixed;top:0px;left:0px;bottom:0px;right:0px;" />

As long as its put above everything else on your page (or has a lower Z index) it will appear behind everything else.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.