Background image isn't showing up with css

Question

I am trying to have a responsive full screen image background in my Vue project and I can't get the image to show up, and am not sure what is wrong, the majority of the examples I have seen use the css in my code example

<template>
    <div id="myDiv">

    </div>
</template>

<script>
</script>

<style scoped>
    #myDiv {
        /*background: url('../../Images/Toronto.jpg');*/
        background: url('https://images.pexels.com/photos/374870/pexels-photo-374870.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

can you provide live modal of it ? – Nisharg Shah Apr 27 '19 at 18:11 — Nisharg Shah, Apr 27 '19 at 18:11
I am not sure how to with Vue, as this is a component – Chris Apr 27 '19 at 18:37 — Chris, Apr 27 '19 at 18:37

score 1 · Answer 1 · answered Apr 27 '19 at 18:15

1

HTML and body tag needs to have min-height: 100%.

If you can’t do that, other option would be to apply min-height: 100vh and min-width: 100vw.

answered Apr 27 '19 at 18:15

Pratik Mehta

2,037
2
14
19

Background image isn't showing up with css

1 Answers1