https://github.com/pearmaster/angular-backsplash
An angular directive to fill a block element with an image.
https://github.com/pearmaster/angular-backsplash
Last synced: 3 months ago
JSON representation
An angular directive to fill a block element with an image.
- Host: GitHub
- URL: https://github.com/pearmaster/angular-backsplash
- Owner: pearmaster
- License: mit
- Created: 2014-03-14T21:33:28.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2014-06-02T19:32:51.000Z (about 11 years ago)
- Last Synced: 2025-01-25T19:07:52.255Z (5 months ago)
- Language: JavaScript
- Size: 207 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
angular-backsplash
=================
An angular directive to fill a block element with an image.
### Params
* **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](http://runnable.com/U2zwn1MsJ-NOLwig/angular-backsplash-demos-for-javascript-and-angular-js) 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
### Examples
##### Static image
```
```
##### Image url from angular scope
```
```
### Requirements
This is designed to be used with the [AngularJS framework](https://angularjs.org/). Other than the core
AngularJS library, there are no additional dependencies. I've only tested this on modern browsers.