Fix fixed background issue

This commit is contained in:
taehoon 2019-02-03 15:32:24 -05:00
parent 7115584882
commit ee694d62eb
3 changed files with 13 additions and 7 deletions

View file

@ -66,9 +66,8 @@ export default {
}) })
}, },
logo () { return this.$store.state.instance.logo }, logo () { return this.$store.state.instance.logo },
style () { bgStyle () {
return { return {
'--body-background-image': `url(${this.background})`,
'background-image': `url(${this.background})` 'background-image': `url(${this.background})`
} }
}, },

View file

@ -1,15 +1,21 @@
@import './_variables.scss'; @import './_variables.scss';
#app { #app {
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 0 50px;
min-height: 100vh; min-height: 100vh;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
} }
.app-bg-wrapper {
position: fixed;
z-index: -1;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: 0 50%;
}
i { i {
user-select: none; user-select: none;
} }

View file

@ -1,5 +1,6 @@
<template> <template>
<div id="app" v-bind:style="style"> <div id="app">
<div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
<nav class='nav-bar container' @click="scrollToTop()" id="nav"> <nav class='nav-bar container' @click="scrollToTop()" id="nav">
<div class='logo' :style='logoBgStyle'> <div class='logo' :style='logoBgStyle'>
<div class='mask' :style='logoMaskStyle'></div> <div class='mask' :style='logoMaskStyle'></div>