podrian decirme o aconsejarme como puedo meter las letras dentro de la imagen sin hacerle esto al estilo de las letras:margin-top:-100;
ya que si hago eso afecta lo responsivo de la imagen, el framework que uso es Foundation.js.
gracias de ante mano.
les dejo una foto de como lo tengo ahorita,
-
¿Qué código tienes? La solución (o soluciones) dependerán en gran medida del código HTML que tengas y de si se puede modificar o no.– Alvaro Montoro ♦el 16 may. 2017 a las 5:25
Añade un comentario
|
1 respuesta
Una forma para hacer lo que quieres sería crear un div
con el tamaño exacto de la imagen y mediante css
agregarle la propiedad background-image: url()
junto con los estilos que ocupes para el texto
.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>
-
-
1@HolaSoyAnza si te ha servido, no te olvides de marcarla como aceptada– Joriusel 14 may. 2017 a las 20:59