how to put letters inside a background image in Html5?

Question

how to put letters inside a background image in Html5?

Navigation

#1 by (3 votes)

2

could you tell me or advise me how I can put the letters inside the image without doing this in the style of the letters: margin-top:-100; since if I do that affects the responsiveness of the image, the framework I use is Foundation.js. Thanks in advance. I leave a photo of how I have it now,

javascript jquery html5 css3 foundation

asked by Hola Soy Anza 14.05.2017 в 21:43

source

1 answer

Modify and save text files with PHP How to install and use PyQt5 in Windows?

score 3 · Answer 1

One way to do what you want would be to create a div with the exact size of the image and using css add the property background-image: url() along with the styles that you occupy for the text

.container {
  float: left;
  color: white;
  font-family: Arial;
  font-weight: bold;
  text-align: center;
  width: 200px;
  height: 200px;
  background-image: url('http://static.vix.com/es/sites/default/files/styles/thumbnail/public/btg/curiosidades.batanga.com/files/8-sorprendentes-cosas-que-no-sabias-sobre-los-gatos.jpg?itok=wKHJNNav');
}

.container2 {
  float: left;
  color: black;
  font-family: Arial;
  font-weight: bold;
  text-align: center;
  width: 200px;
  height: 200px;
  background-image: url('https://tuapppara.com/wp-content/uploads/2017/02/mejoresvideosanimales.jpg');
}

<div class="container">Soy un gato</div>
<div class="container2">Soy un perro</div>