How to fix a background img that isn't showing

Question

My background image isn't showing and I can't figure out why. I've already read through a few other threads but none of the suggestions are working.

The path to the background image is correct, that's not the problem. I've added a height and size/position etc.

.images {
  position: relative;
  height: 100%;
  width: 100%;
}

#slideshow {
  display: block;
  position: absolute;
  background: url("links/slideshow/_anx_tote2.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100% bottom;
  height: 100%;
  z-index: -1;
}

<div class="images">
  <div id="slideshow"></div>
</div>

The background image should cover the right half of the screen.

I've set the width to 100% and removed the z-index but it's still not showing — Natalie, Jun 11 '19 at 12:38
possible duplicate of : https://stackoverflow.com/q/1622027/8620333 — Temani Afif, Jun 11 '19 at 12:44
the problem was the width: 100%; I changed it to 100vh and it's working now! Thanks everyone — Natalie, Jun 11 '19 at 13:38

score 0 · Answer 1 · edited Jun 11 '19 at 13:10

* {
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
}

.images {
  position: relative;
  height: 100%;
  width: 100%;
}

#slideshow {
  display: block;
  position: absolute;
  width: 100%;
  background-image: url("https://picsum.photos/200");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% bottom;
  height: 100%;
  z-index: -1;
}

<div class="images">
  <div id="slideshow"></div>
</div>

You need to add 100% height for body and HTML.

score 0 · Answer 2 · answered Jun 11 '19 at 14:34

The image doesn't show because there was no width and height set to #slideshow.

Adding percentage height to a div, a height has to be determined first. For more information, you can see here.

Thus I have added height: 100vh; and width: 100% to #slideshow;

.images {
  position: relative;
  height: 100%;
  width: 100%;
}

#slideshow {
  display: block;
  position: absolute;
  background: url("https://i.imgur.com/WLimwqR.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100% bottom;
  height: 100vh;
  width: 100%;
  z-index: -1;
}

<div class="images">
  <div id="slideshow"></div>
</div>

revati raman · Answer 3 · 2019-06-12T07:45:45.950

-1

 #slideshow {
background: url(links/slideshow/_anx_tote2.jpg) no-repeat transparent;
background-size: cover;
height: 100%; 
}

edited Jun 12 '19 at 07:45

answered Jun 11 '19 at 12:39

revati raman

97
5

How to fix a background img that isn't showing

3 Answers3