title: background-color not stable in one position
body: <p>I'm customizing the look of Slick Slider.</p>
  
  <p>I have a grey background I created on <code>.media-slider</code> that has a certain height and I position arrows to align with the top of the grey background:</p>
  
  <p>Here is the grey background:
  </p>
  
  <pre><code>.media-slider-wrap .media-slider {
    position: relative;
    overflow: hidden;
    padding-bottom: 4rem;
  }
  .media-slider-wrap .media-slider:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #eff3f5;
    display: block;
    height: 55.1%;
    z-index: -1;
  }
  </code></pre>
  
  
  
  <p>I positioned the arrows like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>.media-slider-wrap .media-slider-text-slider .slick-prev, .media-slider-wrap .media-slider-text-slider .slick-next {
      background-color: #d4272e;
      height: 40px;
      width: 40px;
      z-index: 1;
      left: 0;
      top: 54%;
  }
  </code></pre>
  
  <p>This is the alignment I made where the top of the grey background aligns with the top of the arrow:</p>
  
  <p><a href="https://i.stack.imgur.com/wWtdw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wWtdw.png" alt="enter image description here"></a></p>
  
  <p>But this happens when i add more text to the p tag or change h1 to lower size h tags, The grey background is moving down as more or less content get added to the text. </p>
  
  <p><a href="https://i.stack.imgur.com/FsvsA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FsvsA.png" alt="enter image description here"></a></p>
  
  <p>How can I resolve this issue of aligning top of arrow and grey background around the center of the image?  I suspect I have to change the way I created the grey background.</p>
  
  <p>Also on very small screen(iphone 5 screen size) i am getting this other slide pushing to the current slide like this, not sure if it caused by the same issue </p>
  
  <p><a href="https://i.stack.imgur.com/TqMX2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TqMX2.png" alt="enter image description here"></a></p>
  
  <p>Here is my full code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    $(".media-slider-bg-slide").slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '.media-slider-text-slider',
    });
  
  
    $(".media-slider-text-slider").slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      centerPadding: '0px',
      asNavFor: '.media-slider-bg-slide',
      centerMode: false,
      focusOnSelect: true,
      speed: 1000,
      arrows: true,
    });
  
  
  });
  
  jQuery(window).on('load', function() {
    function getImage() {
      jQuery(".media-slider-wrap .media-slider-img-wrap").each(function() {
        var imgSrc = $(this).find("img").attr("src");
        $(this).css('background-image', 'url(' + imgSrc + ')');
      });
    }
    getImage();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Teko', sans-serif;
  }
  
  html {
    font-size: 18px;
  }
  
  @media (min-width: 576px) {
    .container {
      max-width: 540px;
    }
  }
  
  @media (min-width: 768px) {
    .container {
      max-width: 720px;
    }
  }
  
  @media (min-width: 992px) {
    .container {
      max-width: 960px;
    }
  }
  
  @media (min-width: 1200px) {
    .container {
      max-width: 1400px;
    }
  }
  
  h1,
  .h1 {
    font-size: 3.815rem;
  }
  
  h2,
  .h2 {
    font-size: 2.441rem;
  }
  
  h3,
  .h3 {
    font-size: 1.563rem;
  }
  
  h4,
  .h4 {
    font-size: 1.25rem;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Teko', sans-serif;
  }
  
  .media-slider-wrap .media-slider-text-wrap {
    padding-top: 16%;
    padding-left: 1rem;
  }
  
  .media-slider-wrap .media-slider-text-wrap h1 {
    color: #fff;
    font-weight: normal;
    letter-spacing: 1.5px;
  }
  
  .media-slider-wrap .media-slider-text-slider {
    color: #fff;
    padding: 2%;
  }
  
  .media-slider-wrap .media-slider-text-slider .slick-prev,
  .media-slider-wrap .media-slider-text-slider .slick-next {
    background-color: #d4272e;
    height: 40px;
    width: 40px;
    z-index: 1;
    left: 0;
    top: 54%;
  }
  
  .media-slider-wrap .media-slider-text-slider .slick-list {
    padding-top: 1rem;
  }
  
  .media-slider-wrap .media-slider-text-slider .slick-next {
    margin-top: 40px;
  }
  
  .media-slider-wrap .media-slider-text-slider .slick-arrow:hover {
    background-color: #721722;
  }
  
  .media-slider-wrap .media-slider {
    position: relative;
    overflow: hidden;
    padding-bottom: 4rem;
  }
  
  .media-slider-wrap .media-slider:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #eff3f5;
    display: block;
    height: 55.1%;
    z-index: -1;
  }
  
  .media-slider-wrap .slick-prev:before,
  .media-slider-wrap .slick-next:before {
    font-family: 'Ionicons';
  }
  
  .media-slider-wrap .media-slider-img-wrap {
    background-size: cover;
    background-position: top-center;
  }
  
  .media-slider-wrap .media-slider-img-wrap img {
    opacity: 0;
    visibility: hidden;
  }
  
  .media-slider-wrap .media-slider-bg-slide {
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    top: 0;
    bottom: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  
  .media-slider-wrap .media-slider-bg-slide div {
    height: 100%;
  }
  
  .media-slider-wrap .media-slider-bg-slide .slick-slide {
    margin: 0px;
  }
  
  .media-slider-wrap .media-slider-gradient-wrap {
    position: relative;
    overflow: hidden;
  }
  
  .media-slider-wrap .media-slider-gradient-wrap:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    /* background-color: #000;
    */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#b3000000', GradientType=0);
  }
  
  .media-slider-wrap .pagingInfo {
    position: relative;
    left: 8rem;
    top: -10px;
    color: #fff;
  }
  
  .media-slider-wrap .media-slider-bg-slide img {
    height: 100vh;
    width: auto;
  }
  
  @media (max-width: 768px) {
    .media-slider-wrap .media-slider-text-wrap br {
      display: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  &lt;link href="https://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" /&gt;
  &lt;link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" /&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" /&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Teko:400,500,600,700" rel="stylesheet"&gt;
  
  &lt;div class="mt-5"&gt;&lt;/div&gt;
  &lt;section class="media-slider-wrap"&gt;
    &lt;div class="media-slider"&gt;
      &lt;div class="container"&gt;
        &lt;div class="media-slider-gradient-wrap"&gt;
          &lt;div class="media-slider-bg-slide "&gt;
            &lt;div class="media-slider-img-wrap"&gt;&lt;img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1"&gt;&lt;/div&gt;
            &lt;div class="media-slider-img-wrap"&gt;&lt;img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1"&gt;&lt;/div&gt;
            &lt;div class="media-slider-img-wrap"&gt;&lt;img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1"&gt;&lt;/div&gt;
            &lt;div class="media-slider-img-wrap"&gt;&lt;img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1"&gt;&lt;/div&gt;
            &lt;div class="media-slider-img-wrap"&gt;&lt;img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1"&gt;&lt;/div&gt;
            &lt;div class="media-slider-img-wrap"&gt;&lt;img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;div class="media-slider-text-slider d-flex flex-wrap align-content-end  p-5"&gt;
                &lt;div class="media-slider-text-wrap"&gt;
                  &lt;h4&gt; h4 Energy Delivered&lt;/h4&gt;
                  &lt;p class="col-lg-6 pl-0"&gt;orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,standard dummy text ever since the 1500sum is simply dummy text of the printing and
                    typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,standard dummy text ever since the 1500s&lt;/p&gt;
                  &lt;a href="#" class="btn btn-danger" tabindex="0"&gt;Learn More&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="media-slider-text-wrap"&gt;
                  &lt;h4&gt; h2 Energy Delivered&lt;/h4&gt;
                  &lt;p class="col-lg-6 pl-0"&gt;orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,standard dummy text ever since the 1500s&lt;/p&gt;
                  &lt;a href="#" class="btn btn-danger" tabindex="0"&gt;Learn More&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="media-slider-text-wrap"&gt;
                  &lt;h4&gt; h3 Energy Delivered&lt;/h4&gt;
                  &lt;p class="col-lg-6 pl-0"&gt;orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,standard dummy text ever since the 1500s&lt;/p&gt;
                  &lt;a href="#" class="btn btn-danger" tabindex="0"&gt;Learn More&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="media-slider-text-wrap"&gt;
                  &lt;h4&gt; h4 Energy Delivered&lt;/h4&gt;
                  &lt;p class="col-lg-6 pl-0"&gt;orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,standard dummy text ever since the 1500s&lt;/p&gt;
                  &lt;a href="#" class="btn btn-danger" tabindex="0"&gt;Learn More&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="media-slider-text-wrap"&gt;
                  &lt;h4&gt; h5 Energy Delivered&lt;/h4&gt;
                  &lt;p class="col-lg-6 pl-0"&gt;orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,standard dummy text ever since the 1500s&lt;/p&gt;
                  &lt;a href="#" class="btn btn-danger" tabindex="0"&gt;Learn More&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="media-slider-text-wrap"&gt;
                  &lt;h4&gt; h4 Energy Delivered&lt;/h4&gt;
                  &lt;p class="col-lg-6 pl-0"&gt;orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,standard dummy text ever since the 1500s&lt;/p&gt;
                  &lt;a href="#" class="btn btn-danger" tabindex="0"&gt;Learn More&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>