texto dentro de una imagen con css

[shujidan]

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:

<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 :)