透明图像层下的滑块 - 响应布局

Question

我想创建一个位于透明png图像下的响应滑块。滑块在图像下工作正常，桌面上有以下代码，但响应测试失败。

CSS：

.layer {
  width: 1920px;
  height: 725px;
  background: url('../images/edge-holders.png') no-repeat top center;
  position: relative;
  margin: 0px;
  z-index: 99;
  top: -760px;
}

HTML：

// Some Slider Code comes here
<div class="layer"></div>

在css中，我尝试使用@media调整图像大小以适应滑块宽度和宽度。然而它的高度不起作用。

以下是我想要实现的目标

编辑： 参考链接：http://sociomarker.com/websites/ps/