Image doesn't show up

[nevyen]

Hey,

I copied your code from the example to use it in my application. But the backgroundimage doesn't show up.

If I change height: 100% to height: 1000px in my gallery-item css-Class the image is shown. Can u tell me what I am doing wrong ?

Greets Dominic

[MaksymShutiak]

Hi, Dominic! sorry for my english).If you need a gallery in full screen , all parental units have to be 100% and not only .gallery-item. The easiest way to add .gallery-wrapper 100vh. If you could show me html and css which is copied I could help you better.

Thanks for your question! Best regards, Maxym (Rademade team)!

[nevyen]

Hey, don't worry about your english, mine isn't that good too.

Here is my HTML:

<div class="main-box">
  <div class="gallery-wrapper" cycle-gallery="cycle-gallery" config-buffer="2"
       config-animation-time="250"
       gallery-index="baseIndex">
    <div cycle-gallery-holder="cycle-gallery-holder" class="gallery-slider in-index ng-isolate-scope">
      <div gallery-repeater="item in images" class="gallery-item" style="background-image: url({{item.path}})">
      </div>
    </div>
    <i class="gallery-overflow"></i>
    <button gallery-button="animateNext" class="action-button next animate ng-isolate-scope">Animate next</button>
    <button gallery-button="animatePrev" class="action-button prev animate ng-isolate-scope">Animate prev</button>
  </div>
  <div class="main-box-data">
    <h1 class="main-title"> Check this out</h1>
  </div>
</div>

Images is an array that comes from database. The URLs in item are working and in browser inspection mode the images are shown. So my fault aren't wrong URLs

Here my css:

html {
  min-height: 100%;
  height: auto !important;
  overflow-y: scroll;
  overflow-x: hidden;
}

.navbar-text {
  margin-left: 15px;
}

body {
  height: 100%;
}

.main-box {
  display: table;
  padding: 0 150px;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}

.gallery-wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.gallery-slider {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  white-space: nowrap;
}

.main-box-data {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.gallery-item {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-position: top center;
  -webkit-background-size: cover;
  background-size: cover;
}

.gallery-overflow {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.action-button {
  position: absolute;
  z-index: 3;
  top: 0;
  width: 50%;
  height: 100%;
  border: 0;
  text-indent: -9999px;
  background: none;
  outline: none;
  cursor: pointer;
}

.action-button.prev {
  left: 0;
}

.action-button.next {
  right: 0;
}

.main-title {
  position: relative;
  z-index: 2;
  margin-bottom: 0.625em;
  font-size: 3.125em;
  letter-spacing: 0.125em;
  font-weight: normal;
  text-transform: uppercase;
}

I created a fiddle to show the complete generated code. Maybe the fiddle isn't good to show this up because all scriptfiles are missing. I replace the image urls with the images from your demosite.

I hope this code is enough to find my error.

Thanks in advance

[MaksymShutiak]

look this Fiddle. Now all working fine. I am add to .gallery-slider height 100% and fix issue

[nevyen]

Thanks this work.

in sass/base/libary/_main.sass in line 66 gallery-slider has height: auto. And in your demo page also. So I've got no idea why it works at your page :D