Texto dentro de una imagen usando css

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

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.

Código CSS:

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

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 queremos introducir ensima de la imagen</p>
    <p>holaaa</p>
    </div>
</body>
</html>

Gracias por su ayuda

emprear · #2 (**permalink**) 04/06/2012, 14:28

Podés hacer algo asi

Código CSS:

Ver original#fondo1{ 
background-image: url(bg.jpg); 
background-size:890px 340px;
background-repeat:no-repeat;
height: 350px;
background-position:center center;
width: 900px;
margin-bottom: 10px;
border: 1px solid #000;
}

Analizándolo
tu capa contenedora es de 900 x 350
es de suponer que la imagen es de el mismo tamaño
con
background-size:890px 340px;
le decimos que el fondo ocupe 10px menos de alto y de ancho
luego con background-position la centramos en las dos dimesiones

La otra alternativa es hacer las imagens directamente del tamaño eseado y darles solo la posición con center center

Saludos

fertest · #3 (**permalink**) 04/06/2012, 14:38

Hola,
esta pregunta es mas de CSS que de HTML, por lo que creo que deberías colocarlo en el foro de CSS. De todos modos, para lograr el efecto de márgenes que quieres, puedes usar el padding, indicándole el valor que mejor se ajuste a tus necesidades

Salu2

luiguirbr · #4 (**permalink**) 06/06/2012, 15:04

Gracias, Saludos

emprear · #5 (**permalink**) 06/06/2012, 16:11

Cita:

Iniciado por fertest

Hola,
esta pregunta es mas de CSS que de HTML, por lo que creo que deberías colocarlo en el foro de CSS. De todos modos, para lograr el efecto de márgenes que quieres, puedes usar el padding, indicándole el valor que mejor se ajuste a tus necesidades

Salu2

Esa no es del todo una solución, aplicando un padding su div ya no sería de 340px x 300px.

Saludos