An angular directive to fill a block element with an image.
- url - Provide the url of the image to display. This value is watched so you can change it to update the image.
- fade - When switching images, whether or not to fade from one image to the other:
- true - fade for 1 second
- false (default) - do not fade between images
- fast - fade for 1/2 second
- slow - fade for 2 seconds
- <number> - fade for the specified number of seconds
- mode - Changes how the container element is filled with the image. See a demo showing each mode.
- resize - default, aspect ratio remains the same, either the height or width equals container
- stretch - aspect ratio changes so that the image fills the container
- fill - image grows proportionally to fill container, overflow is hidden
- false - show images in their natural dimensions
<div backsplash url="http://lorempixel.com/800/600/" style="width: 400px; height: 200px"></div>
<div backsplash mode="stretch" fade="slow" url="{{imageUrl}}" style="width: 400px; height: 200px"></div>
This is designed to be used with the AngularJS framework. Other than the core AngularJS library, there are no additional dependencies. I've only tested this on modern browsers.