I am trying to create a layout similar to the image in this link:
https://i.sstatic.net/crywo.jpg
However, I am facing issues with placing arrows (fa-angle-left) on the image within a slider. I have experimented with using position: absolute and relative, but haven't been successful.
Below is my code snippet, where I've used font-awesome for the arrows. Please note that the arrows may not function as intended due to the setup.
#top_header {
background-image: url(http://i.imgur.com/wCDfIxa.png);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
.slider_wrapper {
width: 100%;
background-color: red;
overflow: hidden;
img {
width: 100%;
border: 0;
padding: 4em 0;
}
a {
.fa-angle-left, .fa-angle-right {
font-size: 80px;
color: yellow;
}
.fa-angle-left {
float: left;
}
.fa-angle-right {
float: right;
}
}
}
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<section id="top_header" class="clearfix">
<div class="wrapper">
<div class="slider_wrapper">
<img src="http://i.imgur.com/bPbklqm.png" alt="">
<a href="#"><span class="fa fa-angle-left"></span></a>
<a href="#"><span class="fa fa-angle-right"></span></a>
</div>
</div>
</section>