Background image isn't responsive at Nuxt.js

M

Murat Özcan

Guest
i recently started developing a Nuxt app and kinda failed at CSS side at very early phases. To my problem, which seems very repetitive at this field, it's responsive background. So far everything seemed fine unless opening at mobile web browser.

I want to put an image at background and every content/vue component etc slides in front of it. Here is what i tried so far

I checked at chrome web (with extending and stretching all the way up and down and seemed right) , chrome developer tools (various mobile responsiveness also passed and had seen bg-image covers all the screen)

But; i opened the website at my phone and asked some of my friends to check that, all send the same problem, it wasnt stretching(covering) at mobile.

https://ibb.co/k129BrQ this one with no padding at index.vue by mobile browser

https://ibb.co/PD5Sfyc this one with 1000px padding-top at index.vue by mobile browser

https://ibb.co/PD5Sfyc this one with 1500px padding-top at index.vue but chrome dev tools at iphone X settings (also what i expected and wanted to see)

-website

--assets

---css

----main.css

body {
background: url('../img/background.jpg') no-repeat fixed;
background-position: center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}


---layouts

----default.vue

<template>
<div>
<nuxt />
</div>

</template>

<script>
export default {

}
</script>


---pages

----index.vue

<template>
<div>
<h1>Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
</div>
</template>

<script>
export default {
layout: 'default'
}
</script>


I did expected to see all screen of mobile browser covered by image but i realized this; It covers the content that app created, if content cant reach the screens end, it wont render as i expected.

Continue reading...
 
Top