Search code examples
cssbootstrap-vue

background image in bootstrap/css does not cover full screen

I am using a background-image on the main div of the component, but it is only covering the content that I provide in that main div (like if I just have half-page content it only renders behind it not on full screen). It covers all when I use position fixed but then scroll function is disabled.

.container-div {
  background: url("../assets/images/bucket.jpg");
  position: fixed;
  min-width: 100%;
  min-height: 100%;
}
Solution

  • Try this:

    .container-div {
  background: url("../assets/images/bucket.jpg");
  position: center;
  background-size: cover;
  height: 100vh; //Change this as per design needs
  width: 100%; //Change this as per design needs
}