<div class="wrapper">
  <div class="container1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="container2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="container3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>
<div class="wrapper">
  <div class="explaino">
    <p>This is a text-resizing demostration. You can resize the text using your browser settings (not the zoom feature) to see the effect of different sizing and styling methods on each container above.</p>
    <ul>
        <li><a href="https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages">Resizing in Firefox</a></li>
      <li><a href="https://support.google.com/chrome/answer/96810?hl=en">Resizing in Chrome</a></li>
      <li><a href="https://support.microsoft.com/en-us/help/17456/windows-internet-explorer-ease-of-access-options">All IE access features</a>, including zoom and text resize </li>
      <li><a href="https://support.apple.com/en-us/HT207209">Resizing in Safari</a></li>
      <li>Mobile browsers allow pinch zoom, but any text resizing must be done at the device's operating system settings.</li>
  </div>
</div>

.wrapper {
  display: block;
  clear: both;
  font-size: 16px; /* default browser size */
  font-family: sans-serif;
  color: #000000;
}
.container1,
.container2,
.container3 {
  float: left;
  margin: 1em;
  padding: 1em;
}
.explaino {
  margin: 1em;
  padding: 1em;
  background: #eeeeee;
  color: #333333;
}
.container1 p,
.container2 p,
.container3 p {
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.7);
}
.container1 {
  width: 160px;
  max-width: 200px;
  max-height: 160px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/sceptical-cats.jpg);
} 
.container2 {
  width: 10em;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/sceptical-cats.jpg);
}

.container3 {
  width: 10em;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/236520/sceptical-cats.jpg) top left no-repeat;
  background-color: #D6A36C;
}