PxResponsiveBg plugin is initialized on pre-existing markup.
data-
, for example:
<div id="responsive-bg-target" data-background-image="../path/to/the/image.jpg" data-overlay="#4ab6d5" data-overlayOpacity="0.4">
.
$('#responsive-bg-target').pxResponsiveBg(options);
Option | Default | Description |
---|---|---|
backgroundImage (required) | None | Path to the background image. The path can be either relative or absolute. |
overlay | false |
Background overlay:
|
overlayOpacity | 0.2 | Overlay opacity (must be in the range 0.0 to 1.0). Any value outside the interval, though valid, is clamped to the nearest limit in the range. |
backgroundPosition | 'center middle' |
Align background image. Format: Available values for
Available values for
|
require(['jquery', 'px/plugins/px-responsive-bg'], function($) {
...
});
You can call a public method of PxResponsiveBg instance using the syntax:
$('#responsive-bg-target').pxResponsiveBg('methodName');
Method name | Description |
---|---|
update | Update the background image size/position according to the target element dimensions. |
destroy | Destroy the PxResponsiveBg instance. |
To use PxResponsiveBg plugin, you need to include the next scripts:
<script src="path/to/js/pixeladmin/plugins/px-responsive-bg.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-responsive-bg.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['px-responsive-bg']);
Alternatively, you can include PxResponsiveBg plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'px-responsive-bg',
files: [
'path/to/js/pixeladmin/plugins/px-responsive-bg.js',
'path/to/js/pixeladmin/directives/angular-px-responsive-bg.js',
],
},
]);
responsive-bg
directive
You can use responsive-bg
directive where you want.
And when the scope is destroyed the directive will be destroyed.
PxResponsiveBg's options can be specified as attributes. All options expect an angular expression instead of a literal string.
<div responsive-bg
background-image="'path/to/image.jpg'"
overlay="'#000'"
overlay-pacity="0.7">...</div>