jquery-backstretch / jquery-backstretch Goto Github PK

Hello,

I am using backstretch on a new site I am working on. Backstretch was working fine, but I noticed that now, it is not working on 2 of the pages in the site. I thought there might be some kind of conflict on my index page, as that page uses another jquery function to resize the browser window, but the same issue happens on the oher error page, which does not call the browser resize.

Error pages:
http://sliquid.com/test/index.htm
http://sliquid.com/test/articles.htm

all other pages are working (except those I havent made yet.)

any ideas, or known conflicts?

When you hold the Ipad in landscape mode the background fills the view-port fine but scrolling down cut's it off. The same would happen without background-attachment: fixed;

As per title, I'd like to specify which image to backstretch using a class or ID. My background is semantically relevant to my content, so I want it to be presentationally modified rather than "injected".

How would I go about this?

thank you for this very useful plugin!

there is a resizing problem in Chrome 8.0.522, which only occurs when you first load a page with a backstretch background (image height is limited to window height). when you hit refresh it resizes correctly.
I found out the problem lies in reading the width and height of the image in the load event listener.
problem is solved if you replace line 41 with this line

imgRatio = e.target.width / e.target.height;

I think this has been raised before so forgive me. I was looking for a way to prevent the script from running if the browser version was IE6 or older. Googling around I found references to javascript techniques that could do this, but I really don't want to hack on the code myself.

Is there a possibility that a browser or "feature" test could be inserted to stop the code from executing if the browser is IE6 or older?

Thanks in advance.

Hi, I have tried about 6 different 'pop-ups' like lightbox, milkbox etc. None of them work with backstretch. Can you suggest one that does? Maybe its something simple I am missing......

Many thanks.

I'm using backstretch on a site as provided by a Wordpress theme called Anan from Theme Forest. It looks great and works fine unless I include the standard (as provided from the FB developer site) Facebook 'like' button (the iFrame version) in which case the image no longer stretches bigger than the original.

Example where it's ok: http://www.richardolpin.co.uk/
and not: http://www.richardolpin.co.uk/blog/

Any ideas?

nice! just what i needed, tnx :)

my post is not so much an issue as a 'solution'.
I needed to be able to change the background image after backstretch already loaded one.

To do this you need to, either check if an element with id backstretch exists in the DOM and remove it before you call $.backstretch('url/other/image.jpg')

or put this on line 49 of the jquery.backstretch.js:

//remove old
if($.find('#backstretch'))
    $('#backstretch').remove();

I used a svg for my background.

On my computer (Mac) it works fine (svg), but when i view the webpage it does not show the background (same computer + browser) but it works fine with a jpg

Background using jpg:
http://edgecycleworks.com.au/

Background using svg
http://edgecycleworks.com.au/index2.html

I'm using backstretch with Cargo and it's mostly awesome. I've been able to use a different image on each page by having one referenced in the html (for the homepage) and one referenced in each page individually, however if I directly access a page (not via the nav bar) the backstretch image from the homepage appears (the one referenced in the html). Is there a way to fix this?

Here are my codes:

HTML:

").attr("id","backstretch").css({left:0,top:0,position:"fixed",overflow:"hidden",zIndex:-9999}),p=a("").css({position:"relative",display:"none"}).bind("load",function(n){var o=a(this);i=a(n.target).width()/a(n.target).height();m(function(){o.fadeIn(g.speed,function(){typeof l=="function"&&l()})})}).appendTo(c);a("body").prepend(c);p.attr("src",k);a(window).resize(m)}});return this}})(jQuery); </script> <script type="text/javascript"> $(document).ready(function(){ jQuery.ajaxSetup( { complete: handleAjaxComplete }); /* Your image */ $.backstretch("https://files.me.com/joshuahenry/dtrmat"); }); function handleAjaxComplete(XMLHttpRequest, textStatus) { $("#backstretch img").hide(); } </script>

IN EACH PAGE:

<script type="text/javascript">$.backstretch("https://files.me.com/joshuahenry/gzi73z");</script>​

I am curious if you had any thoughts or could provide an overview of you might implement backstretch with a CMS/blogging system like wordpress. Preferably some method for assigning a custom background to each page without creating a new template.

Thanks for your help!

Only having this problem in Safari, works fine if Chrome, Firefox, and IE. When I click on a new page the background image will flash, disappear and then fade in like it should. Any ideas?

V5.0.3 on a MAC, also noticed it does the same thing in Safari for Windows.

Thanks for the great plugin! Besides this small issue it has worked great for me!

I tried a few variations but my jquery is not good enough. Need a way to include the ALT tag on the BG images insertion with backstretch.

Fantastic little plugin!
In IE however I get one error (screenshot attached):

"Invalid argument"

This only occurs when I use the backstretch plugin.

I'm using jQuery 1.4.2 and the document is in HTML5, could these be a factor?

I added ++ line to backstretch script. Now $.backstretch() can be called multiple times. This makes simple slide shows possible. See it working on my home page: http://iao.fi/

Maybe you can add it to official backstrech script.

    function _init() {
        // Prepend image, wrapped in a DIV, with some positioning and zIndex voodoo                                                  
        if(src) {

++ $("#backstretch").remove();

            var container = $("<div />").attr("id", "backstretch")

Thanks for open use of your code - its great! Just had one problem though that I thought you might want to be away of. I find that in IE (not ff) that the bg image doesn't load first time. It WILL load if you refresh the page, but never the first time. I was wondering if it is because I've done something wrong, or if there is an error in your code that I should make you aware of! My webpage is www.natw3.com if you would like to see the problem for youself =) natalie

Hey Scott. I have several athletic pages where each page has a background representing is sport. I use your backstretch script on each one. The issue I noticed is that when I go from one sport to the next, the background will first display men's basketball for a second and then display the correct background image. I don't know if it's an issue with backstretch or not, but would you take a look?

Here's the url - http://www.thisisnebraska.com/index3.php

Use the "Sports" top nav button to switch between different sports.

Thanks, man.

Kevin

Would it be terribly difficult to be able to set a maximum width/height that the image will not scale beyond? I could really use this feature for a specific design...

It seems that there is an transparency issue with jQuery Backstrech in IE7/8. If you overlay an backstreched image by a div with a semi-transparent background (1x1px png-image repeating in both directions - background: url("images/75.png") repeat left top; ), the transparency is fading from top-left to bottom-right.

A working fix is to use not a 1x1px png but a 8x8px png (did not checked other resolutions).

Hope that helps someone.

Installing the latest Feedly add-on (I believe version 5.3) destroys my layout. All page elements disappear behind the backstretched image, though hover over hidden elements reveal them for a moment.

This has been verified on several computers and with multiple installs/uninstalls of the Feedly add-on (this was originally a user reported error that we were finally able to reproduce with the add-on installed) and removing the Feedly IMG element in Firebug eliminates the problem immediately. So too does changing the Feedly z-index from 2147483647 to anything lower.

IE6 refuses to place the main content ontop of the streatched image. Anythoughts on how to either turn off the script in IE6 or make it co-operate?

thanks

In IE (of course) there is a solid background color to the left and bottom of the background image. I figured out to use margin:0; in the body CSS to fix the left margin, but the bottom margin shows a sizable chunk of solid background color. What am I doing wrong?

Hey Scott, I seriously LOVE your backstretch plugin. Played with several different solutions before I found yours. Anyway, I recently upgraded to Chrome 10 and now, every once in a while, when the page refreshes, the background image leaves about a 110px blank space all the way down the right side of the browser. Like I said, it doesn't happen every time, but definitely a recurring issue. Thanks!

hello, I found an issue when the browser resize the image does not cover the entire space but leaves an empty space on the right or bottom.

I tested this bug on Mac OSX 10.5.8:

• Safari Versione 4.0.2 (5530.19)
• Firefox Versione 3.6.7
• Opera Versione 10.60
• Camino Versione 2.0.3

Hi,

Firstly, thanks for developing a fantastically simple plugin - great job!

I'm having a little trouble on how the image resizing seems to work. The plugin seems to center the image that is being used as a background on both axis. I'm finding that I'm losing the bottom part of the image, can you vertically alignment the image from the bottom up?

Thanks

I keep running into a performance issue when I have a jQuery based drop down menu on top of the fullscreen background image. The drop down script (and I've tried multiple) crawls in IE (8) -- but is fine in FF.

I can PM you a link to see what I'm experiencing (can't post it publicly).

I have a container that (for example) uses 70% height and 40% width. Inside this I have an image scaled to 100% width and height, but obviously it is very distorted.

Is it possible to use Backstretch on elements other than <body>?

If you aren't planning to support IE6 feel free to delete this. Though the previous version worked in ie6 aside from the loading issue that is now resolved. Thank you, btw, for your good work in that fix! :)

The issue is the div that holds the image is actually growing that big - so scrollbars are forced on the page as well as like 10-15px of padding.

http://ampse.com/images/jquery-backstretch_ie6_bug.jpg

although ie does through a js error (invalid argument) of course it's of no help in tracking WHERE that line happened.. line 117, there IS no line 117 - lol

I've been looking for a solution for full screen image and this one works perfectly. I was wondering if someone could help me figure out one thing. What I want is to have rotate through an array of images when the page is loaded (so when you refresh or come back to the page, a different image will be the background) using this plug-in. There are other solutions I've seen online but they don't seem to do the full-screen thing as well.

Any thoughts, ideas, comments will be very helpful.

Thanks!!

Anyone have success in using this script in a Tumblr theme?

I'm having trouble making it work - I currently have a CSS background in use as a backup - any insight as to if this is conflicting?

Feel free to look at my source:
http://www.lalalolly.com

The backstretch code is at the bottom of the page near the closing body tag.

Hi,
I know others seem to have found a solution but I can't seem to get this to work so any help appreciated!

I'm building a one page site for a client who has done some time lapse photography. What I'm aiming to do is change the background image relative to what has been clicked in the primary nav. Can anyone help?

It would be nice to have a simple way to disable it when a print stylesheet is loaded.

I read the other thread, but the issue was fixed apparently? And refreshing seems to fix the issue?

I'm not sure if I'm not doing it right, or if there is a problem. I'm in the process of learning jQuery, so please forgive me if I appear ignorant.

Test is here: http://projectrockhopper.com/background/

Works fine in FF, Safari and Chrome. Doesn't load at all in IE8. Solid white background. Refreshing does not solve the issue.

Am I just being ignorant? If so, how? Or is this still an issue?

The title says it all!

I am using jquery.tools.min (latest release) as well for some animations and overlays / masks.

Any suggestions?

Cheers

How hard would it be to implement a random background? I tried using some simple code that chose an image url at random and inserted it where the image url currently goes. The image showed at random but it was on top of other site items and it was not a full screen stretchable background.

Any ideas?

When scrolling the page the background image will sometimes jump for a millisecond, like it is triggering a redraw or something. This happens on your demo site as well. Try to scroll the page up and down fast for a few seconds and watch the background image jump every few seconds.

Backstretcher conflict with Opera when using image replacement technique for header link.

Lets say I have the following:

HTML:
<div id="header">
   <h1 class"title">
       <a href="#"> webpage_title </a>
    </h1>
  </div>

CSS: 

 .title {
        height:100px;
        width:200px; 
        text-indent:-9999px;
        background-image:url(title.png);
        background-repeat: no-repeat;
      }

.title  a    {
            display:block;
            height:100%;
             width:100%;
            }

In FF, Safari and Chrome this works fine, but in Opera the header image is no longer a link with Backstretch turned on. Disable Backstretch and this works just fine, and the header image link becomes clickable in Opera as well.

-Kyle

Would love to have slideshow option, ie changing background in every 'x' seconds.

Hi, I don't think a Safari/OSx specific problem at all, and it's easy to fix it, but anyway you should pay attention to this little problem I've seen: having a image style CSS to define position and/or margins for generic images in the page, it changes the image background margin and/or position as well.

In short it's enough to add a specific class to any images for the page to not touch backstretch's image. Or ... assign in the script a specific class properties only to backstretch's image, rather than general css rules.

Hi There! Fabulous plugin and I'm excited to get it operational! It works perfectly in Saffari and Mozilla but (surprise surprise!) in IE 7 it fails. What's happening is the image we are trying to load is pushing all the page content down the full image height. Also, the image is not scaling full window size as in all the other projects.

Temporary development site is at develop.cellsignals.ca/index3.php
Your insights are most appreciated!

backstretch to a any selector?

$('selector').backstretch() ; ?

Hello! I make site with slider (slide full page content) and it's possible apend backstretch to a hidden divs for example? Each element of slider have a diffrent full screen image.

I’m noticing quite a big performance issue when scrolling a page. On my machine I get 60fps idle, when I start to scroll the frame rate goes down to ~25fps. This happens in all major browsers (FF, Chrome, Safari), testing on OS X.

From what I’ve found out, image size (dimensions, file size) has no impact on the performance drop, browser size has (it gets worse the bigger the browser is).

Here’s the page I’m currently testing it with: http://new.edenspiekermann.com/en/

Do you have any idea on how to optimize the code for performance?

Is there a way to assign a image to different page with a CLASS or ID declaration?

Hi All,

Love the plugin, but just have one question, is it possible to load in a background image not at 100% opacity, perhaps using the css command rgba(0,0,0, 0.50) or something along those lines? I'd love to be able to fade in images to less than 100%.

So if anyone has any thoughts on the subject, would love to hear them :)

thanks!

I'm new to javascript and backstretch. I can get the whole thing to work on my Mac, but when I upload the files to my website the photo doesn't resolve and there are no apparent errors in the error log. I can get it to work with one jpg in particular, but it blows it up much much larger than the screen ( or perhaps sizes it to width making height much taller?) but with other jpgs its blank. Is there some picture size or threshold that's important for resolving the background? I've used Safari, Firefox, Chrome on Mac and Firefox on PC and none resolve. Thanks for your patience and help in advance.

The script works fine in FF, but in IE the background scrolls with the page. Any ideas?

I'm enjoying this script a lot!

But I wonder if the Jquery-Backstretch script could also support a .swf video file?

I think that would be awesome! :-D

Or is this a dumb question to ask?

Grts Marco

I get the following error even if I load the jquery library locally
Message: Invalid argument.
Line: 114
Char: 165
Code: 0
URI: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js

I get the same error, different line # 4614 with the google jquery lib.

Hi

I got this fabulous software to work great with Firefox and Google Chrome but no matter how hard I try (have tried many things) I can't get backstretch to work in this website on IE8:

http://www.atosi.info/index.html

The site is written with Sitespinner i.e. i'm not by any means a proper web designer... hopefully you can still help.

Warm Regards,
Charlie