Seeking assistance on how to eliminate the gap above the slider. The space mirrors the image's height precisely. Any suggestions? I attempted using overflow hidden, but it doesn't seem to be effective.
Appreciate any help!
HTML
<div class="overlayImage"></div>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/collin-banner.jpg" data-thumb="Images/Slider/christmas_concert_slider.jpg" alt="" />
<img src="images/toystory.jpg" data-thumb="Images/Slider/join-the-chorus.jpg" alt="" />
<img src="images/up.jpg" data-thumb="Images/Slider/book-the-chorus.jpg" alt="" />
<img src="images/walle.jpg" data-thumb="Images/Slider/ways-you-can-give.jpg" alt="" />
</div><!-- end slider --->
</div><!--- End slider-wrapper theme-default--->
CSS:
.overlayImage {
z-index: 999;
background-image: url(../images/logo-overlay.png);
background-position: center;
position: relative;
margin: 0 auto;
background-size: 484px 185px;
width: 484px;
height: 185px;
top: 320px;
overflow:hidden;
}