diff --git a/app/routes/index.js b/app/routes/index.js index 368c3f1e..cc58ccff 100644 --- a/app/routes/index.js +++ b/app/routes/index.js @@ -18,8 +18,7 @@ function banner(state, emit) { function body(template) { return function(state, emit) { - const b = html` - ${activeBackground(state, emit)} + const b = html` ${banner(state, emit)} ${header(state)}
diff --git a/app/templates/activeBackground/activeBackground.css b/app/templates/activeBackground/activeBackground.css index ef57484d..de7ef2d7 100644 --- a/app/templates/activeBackground/activeBackground.css +++ b/app/templates/activeBackground/activeBackground.css @@ -1,11 +1,14 @@ .background { - position: absolute; - left: 0; - top: 0; - height: 100%; - z-index: -1; + background-position: center center; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; } -.background > img { - height: 100%; +.background_1 { + background-image: url('../assets/background_1.jpg'); +} + +.background_2 { + background-image: url('../assets/background_2.jpg'); } diff --git a/app/templates/activeBackground/index.js b/app/templates/activeBackground/index.js index 8312b69b..a4b7e4c2 100644 --- a/app/templates/activeBackground/index.js +++ b/app/templates/activeBackground/index.js @@ -1,14 +1,12 @@ -const html = require('choo/html'); const assets = require('../../../common/assets'); module.exports = function(state) { - if (!state.backgroundUrl) { - const backgrounds = assets.match(/background/); - state.backgroundUrl = - backgrounds[Math.floor(Math.random() * backgrounds.length)]; + if (!state.backgroundClass) { + const backgrounds = assets.match(/background_/); + state.backgroundClass = `background_${Math.floor( + Math.random() * backgrounds.length + ) + 1}`; } - return html`
- -
`; + return state.backgroundClass; };