I'm trying to make a container element which has a background-image.  The background-image should be fully visible, if the contents of the container are less in height than the surrounding container. The content should be vertically centered.  If the content should be higher than the container, the container should grow and the background-image should grow as well, fully covering the container.Here's what I came up with.http://codepen.io/HerrSerker/pen/vNeqxrHTML<div class=container>  <div class=center-content-vertical>    <div class=inner>      <div class=text>        <p>This should be centered vertically</p>        <p>The background-image should be fully visible</p>        <p>The height of the surrounding is defined by the aspect ratio of the image.</p>        <p>But if you decrease the window width, the text will become higher than the container and so the container should grow and the background-image should cover the full container while growing in size.</p>      </div>    </div>  </div></div>CSS.center-content-vertical {  overflow: visible;  font-size: 0;}.center-content-vertical::before {  content: '\200d';  width: 100%;  padding-bottom: 40%;  height: 0;  display: inline-block;  margin-left: -100%;  vertical-align: middle;}.center-content-vertical > * {  display: inline-block;  vertical-align: middle;  width: 100%;}.center-content-vertical {  overflow: visible;  font-size: 0;}.center-content-vertical::before {  content: '\200d';  width: 100%;  padding-bottom: 40%;  height: 0;  display: inline-block;  margin-left: -100%;  vertical-align: middle;}.center-content-vertical > * {  display: inline-block;  vertical-align: middle;  width: 100%;}.container .inner {  text-align: center;}.text {  margin: 20px auto;  width: 60%;  font-size: 16px;  text-shadow: 0px 0px 3px rgba(0,0,0,1),1px 1px 0px rgba(0,0,0,1);  color: cornsilk;    background: rgba(0,0,0,0.3);  padding: 20px;  display: inline-block;}.container {  background-image: url(http://lorempixel.com/1000/400/sports/8);  background-position: 35% 50%;  background-size: cover;}.container + .container {  margin-top: 20px;}.wrapper {  width: 60%;  margin: 0 auto;  padding: 20px;  background: silver;  font-family: Lato;  font-weight: 400;}p {  line-height: 1.3;  margin: 0;  margin: auto;}p+p {  margin-top: .5em;}<div class=wrapper>  <div class=container>    <div class=center-content-vertical>      <div class=inner>      </div>    </div>  </div>  <div class=container>    <div class=center-content-vertical>      <div class=inner>        <div class=text>          <p>This should be centered vertically</p>          <p>The background-image should be fully visible</p>          <p>The height of the surrounding is defined by the aspect ratio of the image</p>        </div>      </div>    </div>  </div>  <div class=container>    <div class=center-content-vertical>      <div class=inner>        <div class=text>          <p>This should be centered vertically</p>          <p>The background-image should be fully visible</p>          <p>The height of the surrounding is defined by the aspect ratio of the image.</p>          <p>But if you decrease the window width, the text will become higher than the container and so the container should grow and the background-image should cover the full container while growing in size.</p>        </div>      </div>    </div>        </div>  <div class=container>    <div class=center-content-vertical>      <div class=inner>        <div class=text>          <p>This text is so long so that it should be higher then the surrounding container. The container should grow with the content and the background-image should grow accordingly fully covering the container</p>          <p>&nbsp;</p>          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas ducimus deserunt natus quae debitis saepe facilis, aliquam, sequi! Fugiat, esse! Tempora nobis ducimus autem, est saepe nihil dicta. Minus similique, illo maiores facere, explicabo iusto expedita pariatur in nam sed.</p>          <p>&nbsp;</p>          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab eius neque labore non officiis consectetur aperiam possimus doloremque omnis facilis, quidem suscipit excepturi quia tempora, deserunt sint voluptas minus ducimus. Repellat in harum necessitatibus numquam enim dicta placeat magni temporibus cupiditate iste ab amet expedita ad et esse, molestias, illo iure alias dolor voluptatum voluptatem quia nobis. At recusandae accusamus illum ex quas obcaecati blanditiis architecto dolores non assumenda expedita vitae ab deleniti nesciunt quia commodi eligendi, voluptatum nam velit earum molestiae facere minus! Deleniti odit in nam quis aliquid labore illum quae voluptates libero, qui velit molestias optio unde.</p>        </div>      </div>    </div>        </div></div>
Vertical Align with full background-image
html;css