jquery-backstretch / jquery-backstretch Goto Github PK

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes.

Home Page: http://www.jquery-backstretch.com

License: MIT License

JavaScript 96.10% CSS 3.12% HTML 0.79%

jquery-backstretch's Introduction

Note: This repo is currently looking for maintainers: #464

Backstretch

** We're back in business! Merged danielgindi/jquery-backstretch, and all eyes please get back here! **

Demo

There are a couple of examples included with this package, or feel free to check it out live on the project page itself.

Installation

Download/save the JS file from GitHub.
Install via Bower with the following command.

bower install jquery-backstretch

Setup

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");

  // If your element defines a background image with CSS, you can omit the argement altogether
  $(".foo").backstretch();

  // 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});

  // Or, to load from a url that can accept a resolution and provide the best image for that resolution
  $(".foo").backstretch([
    "path/to/image.jpg?width={width}&height={height}"
  ]);

  // Or, to automatically choose from a set of resolutions.
  // The width is the width of the image, and the algorithm chooses the best fit.
  $(".foo").backstretch([
    [
      { width: 1080, url: "path/to/image1_1080.jpg" },
      { width: 720, url: "path/to/image1_720.jpg" },
      { width: 320, url: "path/to/image1_320.jpg" }
    ],
    [
      { width: 1080, url: "path/to/image2_1080.jpg" },
      { width: 720, url: "path/to/image2_720.jpg" },
      { width: 320, url: "path/to/image2_320.jpg" }
    ]
  ]);

  // If we wanted to specify different images for different pixel-ratios:
  $(".foo").backstretch([
    [
      // Will only be chosed for a @2x device
      { width: 1080, url: "path/to/[email protected]", pixelRatio: 2 },
      
      // Will only be chosed for a @1x device
      { width: 1080, url: "path/to/image1_1080.jpg", pixelRatio: 1 },
      
      { width: 720, url: "path/to/[email protected]", pixelRatio: 2 },
      { width: 720, url: "path/to/image1_720.jpg", pixelRatio: 1 },
      { width: 320, url: "path/to/[email protected]",  pixelRatio: 2 },
      { width: 320, url: "path/to/image1_320.jpg", pixelRatio: 1 }
    ]
  ]);

  // If we wanted the browser to automatically choose from a set of resolutions,
  // While considering the pixel-ratio of the device
  $(".foo").backstretch([
    [
      // Will be chosen for a 2160 device or a 1080*2 device
      { width: 2160, url: "path/to/image1_2160.jpg", pixelRatio: "auto" }, 
      
      // Will be chosen for a 1080 device or a 540*2 device
      { width: 1080, url: "path/to/image1_1080.jpg", pixelRatio: "auto" },
      
      // Will be chosen for a 1440 device or a 720*2 device
      { width: 1440, url: "path/to/image1_1440.jpg", pixelRatio: "auto" },
      { width: 720, url: "path/to/image1_720.jpg", pixelRatio: "auto" },
      { width: 640, url: "path/to/image1_640.jpg", pixelRatio: "auto" },
      { width: 320, url: "path/to/image1_320.jpg", pixelRatio: "auto" }
    ]
  ]);
</script>

Automatic resolution selection

The automatic resolution selection algorithm has multiple options to choose from.
The default behaviour is that it matches the logical width of the element against the specified image sizes. Which means that an element with a 320px width on a @2x device is still considered as 320px.
If you want 320px on a @2x device to be considered as 640px, then you can specify pixelRatio: "auto" on the specific image resolution.
However if you want to limit specific images to only be chosen if the device has a certain pixel ratio - you can specify that pixel ratio i.e pixelRatio: 2.5.

Options

Name	Description	Type	Default
`alignX` *	This parameter controls the horizontal alignment of the image. Can be 'center'/'left'/'right' or any number between 0.0 and 1.0.	Integer or String	0.5
`alignY` *	This parameter controls the vertical alignment of the image. Can be 'center'/'top'/'bottom' or any number between 0.0 and 1.0.	Integer or String	0.5
`scale` *	Controls the scaling mode. Can be 'cover'/'fit'/'fit-smaller'/'fill'	String	'cover'
`transition` *	Type of transition to use. If multiple are specified, then it will be chosed randomly	String or Array	'fade'
`transitionDuration` *	This is the duration at which the image will transition in. Integers in milliseconds are accepted, as well as standard jQuery speed strings (slow, normal, fast).	Integer or String	0
`transitionEasing` *	The easing function that will be used for animations.	Any supported jQuery easing value	jQuery default
`animateFirst`	If `true`, the first image will transition in like all the others.	Boolean	true
`fade` *	Sets `transition` to `'fade'` and `transitionDuration` to whatever value was specified.	Integer or String
`fadeFirst`	Synonym for `animateFirst`	Boolean	true
`duration` *	The amount of time in between slides, when using Backstretch as a slideshow, expressed as the number of milliseconds.	Integer	5000
`paused`	For slideshows: Disables the change between slides	Boolean	false
`start`	The index of the image in the array you want to start your slideshow with.	Integer	0
`preload`	How many images to preload at once? I.e. Lazy-loading can be enabled by specifying 0.	Integer	2
`preloadSize`	How many images to preload in parallel? If we are preloading 5 images for the next slides, we might want to still limit it to only preload 2 or 3 at once, according to the expected available bandwidth.	Integer	1
`bypassCss`	Avoid adding any CSS to the IMG element. I.e if you want a dynamic IMG tag that is laid out with the content.	Boolean	false
`alwaysTestWindowResolution`	Always test against window's width instead of the element's width.	Boolean	false
`resolutionRefreshRate`	Threshold for how long to wait before the image resolution will be switched?	Integer	2500
`resolutionChangeRatioThreshold`	Threshold for how much should the different in the resolution be before switch image	Number	0.1 (10%)
`centeredX`	Deprecated. Still works but please do not use it.	Boolean	true
`centeredY`	Deprecated. Still works but please do not use it.	Boolean	true

Options marked with an * can be specified for individual images

Image definition

Each image in the set can be a String specifying the URL for the image, or an object with the following options, or an array of images for different resolutions to choose between. A url can be a url to a video also. Currently the plugin will automatically recognize a youtube url. If you pass urls to raw videos, you have to specify isVideo: true.

Name	Description	Type	Default
`url`	The url of the image or video	String
`alt`	The alternative text for this image (If you want to play along with screen readers)	String	''
`alignX`	This parameter controls the horizontal alignment of the image. Can be 'center'/'left'/'right' or any number between 0.0 and 1.0.	Integer or String	0.5
`alignY`	This parameter controls the vertical alignment of the image. Can be 'center'/'top'/'bottom' or any number between 0.0 and 1.0.	Integer or String	0.5
`scale`	Controls the scaling mode. Can be 'cover'/'fit'/'fit-smaller'/'fill'	String	'cover'
`transition`	Type of transition to use. If multiple are specified, then it will be chosed randomly	String or Array	'fade'
`transitionDuration`	This is the duration at which the image will transition in. Integers in milliseconds are accepted, as well as standard jQuery speed strings (slow, normal, fast).	Integer or String	0
`transitionEasing`	The easing function that will be used for animations.	Any supported jQuery easing value	jQuery default
`fade`	Sets `transition` to `'fade'` and `transitionDuration` to whatever value was specified.	Integer or String
`duration`	The amount of time in between slides, when using Backstretch as a slideshow, expressed as the number of milliseconds.	Integer	5000
`isVideo`	Tell the plugin the this is a video (if cannot be recognized automatically)	Boolean	false
`loop`	Should the video be looped? If yes, then the duration will be used to determine when to stop.	Boolean	false
`mute`	Should the video be muted?	Boolean	true
`poster`	This is for specifying the `poster` attribute in standard	String

Per-resolution-image definition

If you have specified an array of resolutions for a single image, then these are the available options:

Name	Description	Type	Default
`url`	The url of the image	String
`url` for `<video>`	Instead of a single `url`, an array of sources can be specified. Each source has a `src` and `type` attributes.	Array of `{ src, type }`
`alt`	The alternative text for this image (If you want to play along with screen readers)	String	''
`width`	The width of the image	Integer
`pixelRatio`	A strict rule to only choose for the specified device pixel ratio. If set to 'auto', then the element's width will first be multiplied by the device's pixel ratio before evaluating.	Number or "auto"	undefined
`deviceOrientation`	Restrict image selection to specific device orientation	`'landscape'` or `'portrait'`	undefined
`windowOrientation`	Restrict image selection to specific window orientation (based on current window's inner width/height)	`'landscape'` / `'portrait'` / `'square'`	undefined
`orientation`	Restrict image selection to the element's orientation based on the element's current inner width/height)	`'landscape'` / `'portrait'` / `'square'`	undefined
`alignX`	This parameter controls the horizontal alignment of the image. Can be 'center'/'left'/'right' or any number between 0.0 and 1.0.	Integer or String	0.5
`alignY`	This parameter controls the vertical alignment of the image. Can be 'center'/'top'/'bottom' or any number between 0.0 and 1.0.	Integer or String	0.5
`scale`	Controls the scaling mode. Can be 'cover'/'fit'/'fit-smaller'/'fill'	String	'cover'
`fade`	This is the speed at which the image will fade in. Integers in milliseconds are accepted, as well as standard jQuery speed strings (slow, normal, fast).	Integer or String	0
`duration`	The amount of time in between slides, when using Backstretch as a slideshow, expressed as the number of milliseconds.	Integer	5000

Transitions

'fade'
'fade_in_out' / 'fadeInOut'
'push_left' / 'pushLeft'
'push_right' / 'pushRight'
'push_up' / 'pushUp'
'push_down' / 'pushDown'
'cover_left' / 'coverLeft'
'cover_right' / 'coverRight'
'cover_up' / 'coverUp'
'cover_down' / 'coverDown'

Notes about video support:

If the video is not in loop mode, then it will play until the end. You have to specify a duration for the specific video in order to limit its playing duration.
Mobile browsers do not allow playback of videos without the users tapping a play button... So you may want to detect those and supply different media arrays for those browsers.

Slideshow API

Once you've instantiated a Backstretch slideshow, there are many actions that you can perform it:

// Start a slideshow
$('.foo').backstretch([
  'path/to/image.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg'
]);

// Slideshow with granular control
$('.foo').backstretch([
  { url: 'path/to/image.jpg', duration: 3000 }
  { url: 'path/to/image2.jpg', fade: 250 },
  { url: 'path/to/image3.jpg', alignY: 0.2 }
]);

// Pause the slideshow
$('.foo').backstretch("pause");

// Advance to the next slide
$('.foo').backstretch("next");

Method	Description
`.backstretch("show", n)`	Jump to the slide at a given index, where n is the number of the image that you'd like to display. Slide number starts at 0.
`.backstretch("prev")`	Display the previous image in a slideshow.
`.backstretch("next")`	Advance to the next image in a slideshow.
`.backstretch("pause")`	Pause the slideshow.
`.backstretch("resume")`	Resume a paused slideshow.
`.backstretch("destroy", preserveBackground)`	Destroy the Backstretch instance. Optionally, you can pass in a Boolean parameter, preserveBackground, to determine whether or not you'd like to keep the current image stretched as the background image.
`.backstretch("resize")`	This method is called automatically when the container (window or block-level element) is resized, however you can always call this manually if needed.
`.backstretch("current")`	This function returns the index of the current slide

Public Variables

Sometimes, you'll want to access Backstretch's images after you've instantiated the plugin. For example, perhaps you'd like to be able add more images to a slideshow. Doing so is easy. You can access the images array as follows:

$('.foo').backstretch([
  'path/to/image.jpg',
  'path/to/image2.jpg',
  'path/to/image3.jpg'
]);

// Access the instance
var instance = $('.foo').data('backstretch');

// Then, you can manipulate the images array directly
instance.images.push('path/to/image4.jpg')

Additionally, the current index of a slideshow is available through the instance as well:

$("body").data("backstretch").index;

Events

backstretch.before

Backstretch will fire a "backstretch.before" event before a new image loads, triggering a function that is passed the event, Backstretch instance, and index of the image that will be displayed. If you listen for that event, you can, for example, coordinate other changes to coincide with your slideshow.

$(window).on("backstretch.before", function (e, instance, index) {
  // If we wanted to stop the slideshow after it reached the end
  if (index === instance.images.length - 1) {
    instance.pause();
  };
});

backstretch.after

Backstretch will also fire a "backstretch.after" event after the new images has completed loading.

$(window).on("backstretch.after", function (e, instance, index) {
  // Do something
});

Changelog

Version 2.1.18

Bugfix: When another library imports youtube api first, YT detection misbehaves in backstretch.

Version 2.1.17

Bugfix: Calling .backstretch(...) on an already backstretched element did not properly destroy the older backstretch instance. Resulted in ghost backstretches...

Version 2.1.16

New: Added scale feature.

Version 2.1.15

Improvement: Not modifying background property, but background-image, to allow CSS to play with colors. (@philsbury)

Version 2.1.14

New: Added 'deviceOrientation', 'windowOrientation' and 'orientation' options

Version 2.1.13

Bugfix: Native video source tags were misspelled
Bugfix: Youtube matching regex was not constrained to youtube.com/youtu.be domain

Version 2.1.12

New: Added 'fade_in_out' transition

Version 2.1.11

Bugfix: Resolution detection routine failed to properly match current url - and cause an additional replace of the image. This affected video urls in a way that caused them to being played from the start.

Version 2.1.10

Bugfix: pixelRatio == 'auto' was ignored due to a missing rule.

Version 2.1.9

Allow overriding transition options for a single show(...) call
Bugfix: Next transition can go wrong because of css leftover of previous transition

Version 2.1.8

Improved method calling through .backstretch('method', ...) to pass all arguments, and return value.
Added current() function to return current slide index.

Version 2.1.7

Minor documentation improvements. Version release for updated docs in NPM etc.

Version 2.1.6

Minor fix: background css on the target element was sometimes cleared prematurely. (Issue #18)

Version 2.1.5

Minor fix: resolutionChangeRatioTreshold was a typo. Changed to resolutionChangeRatioThreshold, but keeping backwards compatibility.

Version 2.1.4

New: Added more transitions beside fade
Bugfix: Youtube Iframe API's destroy was not being called
Minor documentation updates

Version 2.1.3

New: Youtube and <video> support!

Version 2.1.2

Bugfix: Executing backstretch methods on already backstretched elements failed

Version 2.1.1

Published to bower under "jquery-backstretch-2"

Version 2.1.0

New alwaysTestWindowResolution option
New resolutionRefreshRate option
New resolutionChangeRatioTreshold option
Minor bugfix: If there was no fade duration, the new image was still being removed asynchronously. Possibly causing a glitch if custom CSS is used.

Version 2.0.9

New alt image property
New bypassCss option

Version 2.0.8

Changed multi-res feature width's meaning. width now means the actual width of the image to match against.
Added pixelRatio option for multires.

Version 2.0.7

More granular control over options
1. Now you can specify alignX/alignY/duration/fade on an image basis
1. Minor bugfixes
1. Deprecated centeredX/centeredY

Version 2.0.6

Minor bug fixes due to latest PRs

Version 2.0.5

New fadeFirst feature
New alignX feature
New alignY feature
New paused feature
New start feature
New preload feature
New preloadSize feature
New feature: url templates
New feature: automatic resolution selection
Minor bug fixes

Version 2.0

Now accepts an array of images to create a slideshow
Can attach Backstretch to any block-level element, not just the body
Deprecated "speed" option in favor of "fade" for fadeIn timing
Added "duration" option, and Slideshow API

Version 1.2

You can now called backstretch twice, and it will replace the existing image.

Version 1.1

Added 'centeredX' and 'centeredY' options.
Removed 'hideUntilReady' option. It looks pretty bad if you don't hide the image until it's fully loaded.
Fixed IE img onload bug.
Now supports iPhone/iPad orientation changes.

jquery-backstretch's People

Contributors

Stargazers

Watchers

Forkers

maifith dfischer knowncitizen hypernurb dealingwith paulmwatson noahstokes mpezzi kangster leotsem mastatomba er777 chico weightshift jx2150 adamturtle depis vondruska chrisforrette bartwalczak jbyck jentanbernardus danmillar mynameisrufus infocynic colorjar mykebates luantruong huncent designhawg a973c aapostoliadis nazshal mtvv rwatts emmanuellesoy thefuturewasnow dreizle meomau79 zipang dz0ny piermariacosina popsugar juggy nevernotrarekev joshuapekera johnmcc nvdnkpr firestorm-graphics unstru webbart cowholio4 cfconsultancy djacobs ampthisnetwork bronfman squaremunkey willyfc paulnett zerodev ericatkinson searchtree weivall stantonwjones sangam12345 netconstructor open-source-gis vladmu liluxdev leison axsuul jagwire16 madastro jschulte rady marsvard wmelton graphis macpankiewicz theinkcreative thinklabs kelleyvanevert acisme nicooprat muthhus steffler rndrfero udders-hx ducban mhuneke mnishihan vladimircores stefanhayden lyoshenka cobacious rfmcneil jahrard myusernamejeep redska72 stef157

jquery-backstretch's Issues

Does not work in in Tumblr

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.

Problem on certain pages, on all browsers

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?

Feature: Slideshow

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

Apply backstretch to <div>

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>?

Problem with svg

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

Scrolling glitch in Opera 10.61 OSX

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.

Image positioning

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

Issue with image replacement technique in Opera 10.61 on osx

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

Exclude IE6 and Below in code

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.

Wrong Image Flicker

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

Random image on load

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!!

Conflict with Feedly FF extension (z-index issues)

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.

Chrome 10 - image sometimes not horizontally stretched

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!

Conflict/Performance Issue with IE and dropdown menu

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).

Working in Firefox & Google Chrome - can't get it to work with Internet Explorer 8

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

Backstretch pushes IE 7 content down the page

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 a .swf file/video?

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

#backstretch change on click

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?

Implementing Backstretch with a CMS

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!

Scroll issue in IE

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

Not really an issue but...

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?

popup not working with jquery-backstretch

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.

works on PC, but not on site

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.

ALT var so that we can include ALT tag

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.

getting the following error.... tried multiple jquery libs and even run locally, still get errors

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.

Safari 5.05 osx and CSS images

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.

Margins

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?

Loading issue in IE

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

Not working in FF for mac?

The title says it all!

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

Any suggestions?

Cheers

Untitled

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")

Safari flashing image before it disappears and then fades in.

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!

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.

Opacity possible?

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!

Facebook 'Like' box breaks backstretch...

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?

IE Issue

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?

Resizing problem in Chrome 8.0.522

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;

IE 6 display issue

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

Performance issues

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?

Backstretch on different pages issue / Cargo

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:

resizing window issue

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

IE7/8 Transparency

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.

Landscape mode Ipad

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;

Setting background image with selector

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?

feature request - minimum size?

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...

Doesn't seem to be working for me.

Change the background picture

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();

Error onload in IE 6

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?