ResponsiveBg

Basic

Basic responsive BG

With overlay

Responsive BG with overlay

With custom overlay

Responsive BG with custom overlay

Custom html element as an overlay

Responsive BG with custom html element as an overlay

Initializing

PxResponsiveBg plugin is initialized on pre-existing markup.

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to 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:
  • true - overlay="#000";
  • #color - Set custom overlay color.
  • <div class="bg-primary"></div> - Set custom html element as an 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: {horisontalAlign} {verticalAlign}.

Available values for {horisontalAlign}:

  • left
  • center
  • right

Available values for {verticalAlign}:

  • top
  • middle
  • bottom

Usage


require(['jquery', 'px/plugins/px-responsive-bg'], function($) {
  ...
});

Methods

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.

Usage

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.

AS AN ATRIBUTE
AS AN ELEMENT

Options

PxResponsiveBg's options can be specified as attributes. All options expect an angular expression instead of a literal string.

Options marked with have an angular $watch listener applied to it.
  • background-image
  • background-position
  • overlay
  • overlay-opacity

<div responsive-bg
     background-image="'path/to/image.jpg'"
     overlay="'#000'"
     overlay-pacity="0.7">...</div>