Center Div over Div with Background Size = Cover, Overflow = Hidden and Large Image

Question

I'm trying to vertically and horizontally center a div filled with text

(id = rulesContent)

over a background image (id = rulesBackground)
. The background image is

3840 x 2160 px

, but I only ever want users to see the top left corner of it, adjusted to their screen size. I've got that part figured out.

If

#rulesContent

is longer than the page, I want it to display all and have the ability to scroll to the bottom of it, which is why I've left its position as absolute.

I need to support IE9+. I've spent all day looking for a solution.

Link to CodePen: https://codepen.io/kokeefe/pen/OxjQxa

body {

  text-align: center;

  font-size: 1.2em;

  font-family: Arial;

}



#container {

  width: 100%;

  height: 100vh;

  overflow: hidden;

}



#rulesBackground {

  background: url("http://katyokeefe.com/bets/includes/images/stadium-seats.png") no-repeat top center fixed;

  background-size: cover;

  height: 100vh;

  overflow: hidden;

}



#rulesContent {

  background-color: white;

  opacity: .9;

  display: inline-block;

  vertical-align: middle;

  top: 50vh;

  overflow-y: auto;

}



#rules {

  margin: 0 10%;

  padding: 0;

  max-width: 700px;

}



li {

  text-align: left;

  margin: 15px;

}





/*only menu styling follows*/



#nav {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: auto;

  background-color: #051C2C;

  display: block;

}



#nav>li {

  float: left;

}



#nav>li a {

  display: block;

  color: white;

  text-align: center;

  vertical-align: middle;

  padding: 14px 16px;

  text-decoration: none;

}





/* Change the link color to #111 (black) on hover */



#nav li a:hover {

  background-color: #DC4405;

}

<div id="container">

  <ul id="nav">

    <li>

      <a href="">Menu</a>

    </li>

  </ul>

  <div id="rulesBackground">



    <div id="rulesContent">

      <h2>The Rules</h2>

      <ol id="rules">

        <li>Pick one game winner per week straight up (no spread).</li>

        <li>You can only pick one NFL Team per week; you cannot pick an NFL Team more than once throughout the 16 game season.</li>

        <li>This pool only lasts for the 16 game season and does not include the playoffs.</li>

        <li>You can pick your NFL winner at any time throughout the official NFL Week (i.e. Week 1, Week 2, etc.), but you must have your picks in before the game starts, no if’s and or butts.</li>

        <li>If you lose, you’re OUT!</li>

        <li>The player who lasts the longest wins.</li>

        <li>In the case of a tie (let’s say 2 remaining players lose in the same week), the pool is split.</li>

        <li>Winner takes all!</li>

        <li>In the case of an NFL game tie, you’re not officially out, and may continue forward. However, your win will only counts as a ½ point in the case of multiple winners.</li>



      </ol>

    </div>

  </div>

</div>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Please check this. I try my best to solve your problem. Check in full page of snippet code and responsive view.

body {
  text-align: center;
  font-size: 1.2em;
  font-family: Arial;
  margin:0;
}
#container {
  width: 100%;
  height: 100vh;
}
#rulesBackground {
  background: url("http://katyokeefe.com/bets/includes/images/stadium-seats.png") no-repeat top center;
  background-size: cover;  
  height: calc(100% - 82px);
  overflow: hidden;
  position:relative;
}
#rulesContent {
  background-color: white;
  display: inline-block;
  left: 0;
  margin: 0 auto;
  max-width: 700px;
  width:100%;
  opacity: 0.9;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  vertical-align: middle; 
  padding:30px;
}
h2{
  margin-top:0;
}
li {
  text-align: left;
  margin: 15px;
}

/*only menu styling follows*/

#nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: #051C2C;
  display: block;
}
#nav>li {
  float: left;
}
#nav>li a {
  display: block;
  color: white;
  text-align: center;
  vertical-align: middle;
  padding: 14px 16px;
  text-decoration: none;
}
/* Change the link color to #111 (black) on hover */

#nav li a:hover {
  background-color: #DC4405;
}

/*for tablet view*/
@media screen and (max-width:1024px){
#rulesContent { 
  height:500px;  
  max-width: 60%;
}
}
/*for mobile view*/
@media screen and (max-width:767px){
#rulesContent { 
  height:200px;
  max-width: 75%;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <ul id="nav">
    <li>
      <a href="">Menu</a>
    </li>
  </ul>
  <div id="rulesBackground">

    <div id="rulesContent">
      <h2>The Rules</h2>
      <ol id="rules">
        <li>Pick one game winner per week straight up (no spread).</li>
        <li>You can only pick one NFL Team per week; you cannot pick an NFL Team more than once throughout the 16 game season.</li>
        <li>This pool only lasts for the 16 game season and does not include the playoffs.</li>
        <li>You can pick your NFL winner at any time throughout the official NFL Week (i.e. Week 1, Week 2, etc.), but you must have your picks in before the game starts, no if’s and or butts.</li>
        <li>If you lose, you’re OUT!</li>
        <li>The player who lasts the longest wins.</li>
        <li>In the case of a tie (let’s say 2 remaining players lose in the same week), the pool is split.</li>
        <li>Winner takes all!</li>
        <li>In the case of an NFL game tie, you’re not officially out, and may continue forward. However, your win will only counts as a ½ point in the case of multiple winners.</li>

      </ol>
    </div>
  </div>
</div>

Center Div over Div with Background Size = Cover, Overflow = Hidden and Large Image

Sign up