How to Create Responsive Text on Top of an Image

Text over image - responsive

img {    display: block;}
.thumbnail {    position: relative;    display: inline-block;}
.caption {    position: absolute;    top: 50%;    left: 50%;    transform: translate( -50%, -50% );    text-align: center;    color: white;    font-weight: bold;}

<div id="box-search">      <div class="thumbnail">          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt="Sample Image">          <div class="caption">              <p>contacto@windberg.cl</p>              <p>+56983874071   |   +56228231294</p>              <p>El Aguilucho 3174, Providencia, Región Metropolitana</p>          </div>      </div>  </div>

How to create responsive text on top of an image?

Here are the changes I would make:

• Position the span using bottom rather than top, so you always have a specific margin between the span and the bottom of the image.
• Use a percentage-based line-height so that it will change proportionally to the font-size
• Add some padding to the right of the span, so the text doesn't bump right up on the edge of the span

Updated CSS:

.herotext span {
    position:    absolute;
    bottom:      20px;
    font-family: 'museo_slab500';
    font-size:   150%;
    color:       #fff;
    padding:     0 20px;
    width:       40%;
    line-height: 150%;
    background:  rgb(0, 0, 0);
    background:  rgba(0, 0, 0, 0.7);
}

How to overlay text on top of a responsive image -- responsively?

Simply put you need 2 areas with 1 position:relative; and 1 position:absolute;

Look at this example I made with a loading image to show you how it works.

It wants some code to link a jsfiddle.

  #thisbanner {
  max-width: 700px;
}

Demo: https://jsfiddle.net/norcaljohnny/nbfg3gtd/

Not all demos work on Stack so I will try to add it here, if not please refer to Jsfiddle demo link above.

  #thisbanner {  max-width: 700px;}
h1 {  position: absolute;  display: block;  width: 80%;  margin-top: -12%;  max-width: 610px;  font-size: 4vw;  font-family: 'Roboto Slab', Rockwell, Serif;  font-weight: bold;  color: #FFF;  text-shadow: 0 .125em .125em rgba(0, 0, 0, .5);  padding: .6em 1em .6em 1.7em;}
.interior-header img {  display: block;  position: relative;  width: 100%;  height: auto;  border: 1px solid #b22222;  padding: 1px;

<div id="thisbanner">  <div class="interior-header img">    <div class="headerimage">
      <img src="http://i.stack.imgur.com/i3eqP.jpg" width="630" height="240" alt="Traffic Control" />
      <h1>Traffic Control</h1>    </div>  </div></div>

Responsive text over responsive images

HTML:

  <a href="#1">   
    <figure>
      <img src="image.jpg" alt="Sample Image">
    </figure>
    <p>Text</p>
  </a>

CSS:

a{
  position: relative;
}

a p {
  position: absolute;
  top: 1em;
  left: 1em;
}

The p element containgin the text will expand only to the bounds of the souronding a.
You might consider adding appropriate Padding and Hyphanation according your needs.

Source: https://css-tricks.com/text-blocks-over-image/

---

Related Topics