diff --git a/js/theme.js b/js/theme.js index e438ac73..9dffcc36 100644 --- a/js/theme.js +++ b/js/theme.js @@ -20,11 +20,9 @@ class Theme extends Backbone.Controller { onPostRender(view) { const viewModel = view.model; const theme = viewModel.get('_vanilla'); + if (!theme) return; const model = new Backbone.Model(theme); const el = view.$el; - - if (!theme) return; - switch (viewModel.get('_type')) { case 'page': new ThemePageView({ model, el }); diff --git a/js/themePageView.js b/js/themePageView.js index 12bc0673..e3aff6f2 100644 --- a/js/themePageView.js +++ b/js/themePageView.js @@ -16,11 +16,18 @@ export default class ThemePageView extends ThemeView { const $header = this.$('.page__header'); + this.addHeaderBackgroundLayer($header); this.setHeaderBackgroundImage(header, $header); this.setHeaderBackgroundStyles(header, $header); this.setHeaderMinimumHeight(header, $header); } + addHeaderBackgroundLayer($header) { + if ($header.find(' > .background').length) return; + this.$headerBackground = $('') + .prependTo($header); + } + setHeaderBackgroundImage(config, $header) { const backgroundImages = config._backgroundImage; @@ -40,27 +47,25 @@ export default class ThemePageView extends ThemeView { } if (backgroundImage) { - $header - .addClass('has-bg-image') + $header.addClass('has-bg-image'); + this.$headerBackground .css('background-image', 'url(' + backgroundImage + ')'); return; } - $header - .removeClass('has-bg-image') - .css('background-image', ''); + $header.removeClass('has-bg-image'); + this.$headerBackground.css('background-image', ''); } setHeaderBackgroundStyles(config, $header) { const styles = config._backgroundStyles; - if (!styles) return; - - $header.css({ - 'background-repeat': styles._backgroundRepeat, - 'background-size': styles._backgroundSize, - 'background-position': styles._backgroundPosition - }); + this.$headerBackground + .css({ + 'background-repeat': styles._backgroundRepeat, + 'background-size': styles._backgroundSize, + 'background-position': styles._backgroundPosition + }); } setHeaderMinimumHeight(config, $header) { diff --git a/js/themeView.js b/js/themeView.js index 95d74f92..1460e184 100644 --- a/js/themeView.js +++ b/js/themeView.js @@ -1,4 +1,5 @@ import Adapt from 'core/js/adapt'; +import device from 'core/js/device'; export default class ThemeView extends Backbone.View { @@ -25,6 +26,7 @@ export default class ThemeView extends Backbone.View { setStyles() { this.setClasses(); + this.addBackgroundLayer(); this.setBackgroundImage(); this.setBackgroundStyles(); this.setMinimumHeight(); @@ -36,6 +38,12 @@ export default class ThemeView extends Backbone.View { this.$el.addClass(this.className()); } + addBackgroundLayer() { + if (this.$el.find(' > .background').length) return; + this.$background = $('') + .prependTo(this.$el); + } + setBackgroundImage() { const backgroundImages = this.model.get('_backgroundImage'); @@ -43,7 +51,7 @@ export default class ThemeView extends Backbone.View { let backgroundImage; - switch (Adapt.device.screenSize) { + switch (device.screenSize) { case 'large': backgroundImage = backgroundImages._large; break; @@ -55,27 +63,25 @@ export default class ThemeView extends Backbone.View { } if (backgroundImage) { - this.$el - .addClass('has-bg-image') + this.$el.addClass('has-bg-image'); + this.$background .css('background-image', 'url(' + backgroundImage + ')'); return; } - this.$el - .removeClass('has-bg-image') - .css('background-image', ''); + this.$el.removeClass('has-bg-image'); + this.$background.css('background-image', ''); } setBackgroundStyles() { const styles = this.model.get('_backgroundStyles'); - if (!styles) return; - - this.$el.css({ - 'background-repeat': styles._backgroundRepeat, - 'background-size': styles._backgroundSize, - 'background-position': styles._backgroundPosition - }); + this.$background + .css({ + 'background-repeat': styles._backgroundRepeat, + 'background-size': styles._backgroundSize, + 'background-position': styles._backgroundPosition + }); } setMinimumHeight() { diff --git a/less/core/article.less b/less/core/article.less index 12be3d38..5c63d5fc 100644 --- a/less/core/article.less +++ b/less/core/article.less @@ -1,10 +1,21 @@ .article { - &.has-bg-image { + position: relative; + + &.has-bg-image > .background { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center top; } + &__inner { + position: relative; + } + &__header-inner { .l-container-padding(@article-header-padding-ver, @article-header-padding-hoz); } diff --git a/less/core/block.less b/less/core/block.less index 5d0d21c3..a89fe63c 100644 --- a/less/core/block.less +++ b/less/core/block.less @@ -1,11 +1,19 @@ .block { - &.has-bg-image { + position: relative; + + &.has-bg-image > .background { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center top; } &__inner { + position: relative; .l-container-padding(@block-padding-ver, @block-padding-hoz); } diff --git a/less/core/page.less b/less/core/page.less index aa4bf559..fd710c06 100644 --- a/less/core/page.less +++ b/less/core/page.less @@ -1,20 +1,40 @@ .page { + position: relative; max-width: inherit; .l-container-padding(@page-padding-ver, @page-padding-hoz); - &.has-bg-image { + &.has-bg-image > .background { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center top; } - &__header.has-bg-image { + &__inner { + position: relative; + } + + &__header { + position: relative; + } + + &__header.has-bg-image > .background { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center top; } &__header-inner { + position: relative; .l-container-padding(@page-header-padding-ver, @page-header-padding-hoz); } diff --git a/less/plugins/adapt-contrib-boxmenu/boxMenu.less b/less/plugins/adapt-contrib-boxmenu/boxMenu.less index 2ffd61ca..9ce04440 100644 --- a/less/plugins/adapt-contrib-boxmenu/boxMenu.less +++ b/less/plugins/adapt-contrib-boxmenu/boxMenu.less @@ -1,20 +1,40 @@ .boxmenu { + position: relative; max-width: inherit; .l-container-padding(@menu-padding-ver, @menu-padding-hoz); - &.has-bg-image { + &.has-bg-image > .background { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center top; } - &__header.has-bg-image { + &__inner { + position: relative; + } + + &__header { + position: relative; + } + + &__header.has-bg-image > .background { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center top; } &__header-inner { + position: relative; .l-container-padding(@menu-header-padding-ver, @menu-header-padding-hoz); }