1
\$\begingroup\$

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/vNeqxr

HTML

<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>

\$\endgroup\$
  • 1
    \$\begingroup\$ do you need this to be only css, or will you accept javascript/jquery as well? \$\endgroup\$ – Jaketr00 Oct 16 '15 at 16:47
  • \$\begingroup\$ I think it just works the way I want it to work. I just want to have it double checked. \$\endgroup\$ – yunzen Oct 17 '15 at 17:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.