texto dentro de una imagen con css

luiguirbr · #1 (**permalink**) 04/06/2012, 12:12

Buenas tardes, soy nuevo en el foro me lo recomendo un amigo,

tengo una pregunta quisiera colocar texto de una imagen y lo he conseguido usando CSS el problema es que el texto sale pegado al borde de la imagen... como podria hacer para que haya un margen?? dentro de la imagen para q no llegue a los bordes ni de izquierda a derecha ni de arriba y abajo.

CSS:

Código CSS:

Ver original.boxImage {
background:url(img.jpg) no-repeat;
width:340px;
height:300px;
}

Html

Código HTML:

Ver original<html>
<head>
<title>hola</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div class="boxImage"><p>Texto que va dentro de la imagen</p>
<p>holaaa</p>
</div>
</body>
</html>

Gracias por su ayuda.

buruaga7 · #2 (**permalink**) 04/06/2012, 13:50

.boxImage {
background:url(img.jpg) no-repeat;
width:340px;
height:300px;
padding: 12px;
}

luiguirbr · #3 (**permalink**) 04/06/2012, 14:46

Cita:

Iniciado por buruaga7

.boxImage {
background:url(img.jpg) no-repeat;
width:340px;
height:300px;
padding: 12px;
}

Perfecto ahora el texto tiene un margen a la izquierda Gracias, pero ahora el texto traspasa la imagen :O (de la derecha)

shujidan · #4 (**permalink**) 04/06/2012, 19:11

Cita:

Iniciado por luiguirbr

Perfecto ahora el texto tiene un margen a la izquierda Gracias, pero ahora el texto traspasa la imagen :O (de la derecha)

Pues claro, porque la imagen en el background no se estira, tendria que ser un patron que se repitiera en el eje x. Ademas si le das un ancho (width) y la imagen fuera mas larga se va a cortar.

Puedes implementarlo de esta forma:

Código HTML:

Ver original<div style="position:relative;width:150px;">
<img src="miImagen.png" style="position:absolute;z-index:-1;width:100%;height:100%;" />
mi boton
</div>

De esta forma si el texto no cabe continua en el siguiente renglon y la imagen se hace mas alta, tu le puedes dar el ancho que quieras al div y la imagen se va a ajustar.
(Puedes hacer lo mismo con la altura pero si el texto no cabe quedaria invisible). Anyways, espero que te sirva :)

ArturoGallegos · #5 (**permalink**) 04/06/2012, 20:37

la respuesta del compañero @buruaga7 es acertada aunque un tanto incorrecta o incompleta, la respuesta de @shujidan es valida pero poco adecuada ya que la imagen se deformaria.

prueba con

Código CSS:

Ver original.boxImage {
    background:url(img.jpg) no-repeat;
    width:320px;
    height:280px;
padding:10px;
    }

recuerde que el paddin se le suma al width por lo que el ancho es width + padding R + padding L

dando un total de 320 + 10 + 10 = 340

y para el height aplica lo mismo

shujidan · #6 (**permalink**) 06/06/2012, 11:10

@Ag666 Eso es incorrecto, el padding no evita que termine el background-image antes que el texto. A menos que la imagen fuera estrictamente un patron que se repita, en todo caso la propiedad seria background:url(bg.jpg) repeat;

@luiguirbr en caso de no querer deformar la imagen solo omite el height:100%, esta propiedad solo es util cuando quieras que la altura de la imagen se ajuste al contenido del div.

luiguirbr · #7 (**permalink**) 06/06/2012, 15:02

Gracias amigos, utilize el 1er ejemplo de @buruaga7 y bueno para que el texto no se traspase la imagen use " <br /> "

Saludos.