Menu icon Foundation
Orbit Slider with background image

Nyc1 test1

Hello,

I'm trying to center an orbit slider on top of a full-page background image that will act as a landing page. I've tried numerous approaches to achieve the result but without success. The photo above is the look I'm trying to achieve.

Any help would be greatly appreciated!

Codepen: http://codepen.io/WideGlide/pen/JtbIF

<!-- HTML -->
<!-- set full screen background image -->
<div class="background">

  <!-- Orbit Contianer 630px by 210px -->
  <div class="orbit-container">
    <ul class="orbit-content" data-orbit>
      <li class="background-image:url('http://placeimg.com/630/210/any')">
      </li>
    </ul>
  </div> <!--End orbit container -->
  
</div> <!-- End full screen background -->

<!-- CSS -->
.background {
    min-width: 100%;
  	min-height: 100%;
  	background-repeat:no-repeat;
  	background-position:center;
  	background-size: cover;
	  background-image:url('http://placeimg.com/630/210/any');
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
}


/* Orbit fullscreen background slider */

.orbit-container {
  width: 100%;
  height: 100%;
}

.orbit-slides-container {
  width: 100%;
  height: 100% !important;
}
.orbit-slides-container li {
  width: 100%;
  height: 100%;
  background-repeat:no-repeat;
  background-position:center;
 /* background-size: cover; */
}
            

         

orbit sliderbackground ImageFoundation 5

Nyc1 test1

Hello,

I'm trying to center an orbit slider on top of a full-page background image that will act as a landing page. I've tried numerous approaches to achieve the result but without success. The photo above is the look I'm trying to achieve.

Any help would be greatly appreciated!

Codepen: http://codepen.io/WideGlide/pen/JtbIF

<!-- HTML -->
<!-- set full screen background image -->
<div class="background">

  <!-- Orbit Contianer 630px by 210px -->
  <div class="orbit-container">
    <ul class="orbit-content" data-orbit>
      <li class="background-image:url('http://placeimg.com/630/210/any')">
      </li>
    </ul>
  </div> <!--End orbit container -->
  
</div> <!-- End full screen background -->

<!-- CSS -->
.background {
    min-width: 100%;
  	min-height: 100%;
  	background-repeat:no-repeat;
  	background-position:center;
  	background-size: cover;
	  background-image:url('http://placeimg.com/630/210/any');
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
}


/* Orbit fullscreen background slider */

.orbit-container {
  width: 100%;
  height: 100%;
}

.orbit-slides-container {
  width: 100%;
  height: 100% !important;
}
.orbit-slides-container li {
  width: 100%;
  height: 100%;
  background-repeat:no-repeat;
  background-position:center;
 /* background-size: cover; */
}
            

         

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey Tom!

Check out this Pen I made: http://codepen.io/winghouchan/pen/Kbtjl/

Alexander Assimidis over 5 years ago

.background {
  min-width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url('http://placeimg.com/630/210/any');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.orbit-content {
  text-align: center;
  li {
    color: #000000;
    font-size: 70px;
    position: relative;
    text-transform: uppercase;
    top: 110px!important;
  }
}

/* Orbit fullscreen background slider */

.orbit-container {
  width: 100%;
  height: 370px;
}

.orbit-slides-container {
  width: 100%;
  height: 100% !important;
  li {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: cover; */
  }
}

I'm not sure what you mean but i think u want to center your content in the middle of your Slide or?

If this was Helpful pls click the button down.

Tom Hogan over 5 years ago

Alexander,

First, thanks for your help. I appreciate the effort.

I apologize for not being more clear in my original post.

In effect, what I'm trying to do is place an image (in this case, the white text above) level1.png on top of a background image (New York City skyline) nyc.png so that I have a smaller image on top of the larger image.

I need the smaller image contained in the Orbit slider so that I can rotate the images (level1.png, level2.png, level3.png, etc.) if I want.

I hope this clarifies things a bit.

Again, thanks for your help

Wing-Hou Chan over 5 years ago

Hey Tom!

Check out this Pen I made: http://codepen.io/winghouchan/pen/Kbtjl/

Tom Hogan over 5 years ago

Wing-Hou,

Thank you for your help! it's very much appreciated.

Tom