特定の画像をページの背景にするangularjsのdirective
page-backgroundで指定した画像をページの背景にできる。CSSだけでも実現できるが、AngularJSを使ってみた。
JavaScript
var app = angular.module('app', []); app.directive('pageBackground', function() { return function (scope, elm, attr) { var url = attr.pageBackground; elm.css({ 'background': 'url(' + url + ') no-repeat center center fixed', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover' }); }; });
HTML
<!doctype html> <html lang="ja" ng-app="app" page-background="hoge.jpg"> <head> <meta charset="UTF-8"> <title>background-image</title> <script src="../angular.js"></script> <script src="index.js"></script> </head> <body> </body> </html>
controllerのscopeから値を取得できるようにしてgithubに上げました