Menu icon Foundation
Orbit headlines + bg images

I'm having problems mixing headlines with background images, anybody?
CSS background not working for me. I need the responsiveness active. I need to pull it off from the HTML markup.

Orbitsliderimagesheadlines

I'm having problems mixing headlines with background images, anybody?
CSS background not working for me. I need the responsiveness active. I need to pull it off from the HTML markup.

This post has been closed. No new replies can be added.

Tom Hogan over 5 years ago

Cristyan,

Do you have an example of what you're trying to do?

Cristyan J. Moreno over 5 years ago

Yes, I want to achieve this using headlines.
http://market-pl.com

Alexander Assimidis over 5 years ago

Do you want to make a Slider? Or just an background image?
Maybe u use the Sequence Slider if this is what u want to do.

if this answer was helpful pls click the button down.

Cristyan J. Moreno over 5 years ago

Thanks for your response Alexander. I want to use Orbit slider, but mixup images with headlines.

Alexander Assimidis over 5 years ago

<ul data-orbit>
  <li class="slide1">
    <div class="small-12 columns text-center center-image">
      <h1>Full Screen Orbit</h1>
      <h2>BACKGROUND IMAGE & HEADLINE</h2>
    </div>
  </li>
</ul>


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

.orbit-slides-container
{
  width: 100%;
  height: 100% !important;
}
ul[data-orbit] li
{
  width: 100%;
  height: 100%;
  background-size: cover;
}
.slide1
{
  background: url("YOUR IMAGE") no-repeat center;
}
h1, h2, p
{
  color: #fff;
  font-family: 'Open Sans', sans-serif;
}
.center-image
{
  position: relative;
}
 $(document).foundation();
$(document).ready(function(){
  $(".center-image").css("top",$(".center-image").parent().height()/2);
});

Alexander Assimidis over 5 years ago

I think this is what u want it is nearly the same like the page u posted
Maybe some stylings are missing for any further questions just ask :-)

Cristyan J. Moreno over 5 years ago

Nice! Alexander. Worked like a charm! Thanks so much!