Блог

Главная - Вопросы по программированию - VueJS | Как сделать так, чтобы ваше фоновое изображение заполняло всю страницу?

VueJS | Как сделать так, чтобы ваше фоновое изображение заполняло всю страницу?

#vue.js #background #background-image

Вопрос:

Я хочу, чтобы фоновое изображение заполнило всю страницу, но, к сожалению, оно занимает только половину пространства.

Вот мой код :

 <template>
  
  <div class="backgroundImage" :style="{'background-image': 'url('   require('../../assets/bkg.jpg')   ')'}">
          
    <img class="logo-img" src="../../assets/logo.png" alt="Logo FunkTheTown" title="FunkTheTown" />
  
 </div>

</template>

<script>
export default {

}

</script>

<style scoped>

.backgroundImage{
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    background-size:100% 100%;
    background-repeat: no-repeat;

}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>

Tks для справки
ps: я попробовал покрыть css-свойство размера фона тем же результатом.

Комментарии:

1. Это компонент ! Вы импортируете его в другой компонент?

2. да, прямо в файл App.vue. Это единственный компонент на данный момент.

3. В файле App.vue у вас также есть HTML-шаблон? Возможно, вы не в том состоянии, чтобы сделать его полноэкранным. По крайней мере, вы могли бы использовать css position:fixed; с left:0;right:0;top:0;bottom:0;

4. Ваш совет по css сработал, большое спасибо за вашу помощь.

Метки: ,