Habe hier ein kleines Problem. Möchte dass ein Bild vor dem Owl-Carousel platzieren. was mache ich wohl falsch?
das bild habe ich wie die Bilder für den Slider per css eingebunden. aber ohne erfolg
HTML
<section id="home" class="slider" data-stellar-background-ratio="0.5">
<div class="row">
<div class="owl-carousel owl-theme">
<div class="item item-first">
<div class="caption">
<div class="container">
<div class="col-md-8 col-sm-12">
<h3>Restaurant</h3>
<h1>Unsere Mission: Eine unvergessliche Zeit für Sie!</h1>
<p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6>
</div>
</div>
</div>
</div>
<div class="item item-second">
<div class="caption">
<div class="container">
<div class="col-md-8 col-sm-12">
<h3>Alles Frisch</h3>
<h1>Wir wollen Ihnen höchte Qualität bieten!</h1>
<p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6>
</div>
</div>
</div>
</div>
<div class="item item-third">
<div class="caption">
<div class="container">
<div class="col-md-8 col-sm-12">
<h3>Nicht verpassen</h3>
<h1>Pizzatag jedem Montag alle Pizzen zu 6,00€</h1>
<p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6>
</div>
</div>
</div>
</div>
<div class="item item-fourth">
<div class="caption">
<div class="container">
<div class="col-md-8 col-sm-12">
<h3>Bei uns für Sie</h3>
<h1>Die besten Zutaten für Ihren Gaumen</h1>
<p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</section>.slider .img
CSS
.slider .owl-dots {
position: absolute;
top: 50%;
right: 2em;
justify-content: center;
}
.owl-theme .owl-dots .owl-dot {
display: block;
}
.owl-theme .owl-dots .owl-dot span {
width: 12px;
height: 12px;
margin: 7px 10px;
border: 2px solid #c17d18;
background: transparent;
display: block;
backface-visibility: visible;
transition: opacity 200ms ease;
border-radius: 30px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background-color: #eb3e3e;
border-color: transparent;
}
.slider .caption {
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
background-color: rgba(20,20,20,0.2);
height: 100%;
color: #fff;
cursor: e-resize;
padding: 4em 0 0 2em;
}
.slider .item {
background-position: inherit;
background-repeat: no-repeat;
background-attachment: local;
background-size: cover;
height: 100vh;
.slider .img{
background-image: url(../images/weihn.png);
position: absolute;
top: 15%;
left: 80%;
transform: translate(-80%, -25%);
z-index: 999;
}
.slider .item-first {
background-image: url(../images/slider/slider1.jpg);
}
.slider .item-second {
background-image: url(../images/slider/Salat.jpg);
}
.slider .item-third {
background-image: url(../images/slider/pizza.jpg);
}
.slider .item-fourth {
background-image: url(../images/slider/slider-image3.jpg);
}
.slider .item-second .section-btn {
background: #292929;
}
.slider .item-second .section-btn:hover {
background: #ffffff;
}
.slider .item-third .section-btn {
background: transparent;
border: 1px solid #ffffff;
}
.slider .item-third .section-btn:hover,
.slider .item-third .section-btn:focus {
background: #ce3232;
border-color: transparent;
color: #ffffff;
}