0

I have a webpage written in html and css as a prototype. Now we're implementing this using VueJS. I want to have a picture as a background in the homepage. The problem is that I try to create a div within the template, then style it from the style part, but the picture doesn't come up. I tried linking the picture in an img tag, and it shows which means that the page is correctly linked through the router, and the url is correct.

here is the code that I think is supposed to work:

.background {
  background-image: url(../assets/img/21.jpg);
  width: 100%;
}
<template>
      <div>
        <div class="background"></div>
      </div>
</template>

I tried to follow with the answers given here but they made no difference.

am I missing something or what exactly is wrong here?

Huangism
  • 16,278
  • 7
  • 48
  • 74
j0zeft
  • 597
  • 2
  • 10
  • 29
  • 6
    It works, but your div's height is 0 so... You can tell there's nothing in it, nor does css specify its height. – N.B. Jul 26 '18 at 14:07
  • Add a word to your background div and see the bg image. As mentioned above, you have no content in the div so it doesn't visually appear on page – Huangism Jul 26 '18 at 14:12

1 Answers1

1

Like @N.B. said: div's height is missing. Fiddle

HTML:

<div>
  <div class="background"></div>
</div>

CSS:

.background {
  width: 100%;
  height: 50px;
  background-image: url(http://via.placeholder.com/1920x900);
}

Remember your div's height can't be 100% as long as your parent div's height is not set.

If you want 100% width and height use this

HTML:

<div class="template">
  <div class="background-parent">
    <div class="background"></div>
  </div>
</div>

CSS:

div.background-parent
{
  position: relative;
  width: 100%;
  height: 600px;
}
.background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(http://via.placeholder.com/1920x900);
}
Sebastian Heinrich
  • 84
  • 5