0 votos
por (230 puntos) en HTML
buenos dias! mi pregunta es como colocar correctamente una imagen de fondo en un div que contiene texto. ya que al colocarla el texto sobresale del la imagen de fondo

3 Respuestas

0 votos
por (200 puntos)

Hola ...

Tengo esto para ti, espero te pueda ayudar :

Este es tu div:
<div class="image">
<img src="images/miejemplo.gif" alt="Mi titulo de la imagen">
 <h2><span>Floto encima de la imagen:<span>&nbsp;</span><br><span>&nbsp;</span>Soy un fantasma</span></h2>
</div>
Aqui esta el CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
idth: 100%;
}
Si deseas ponerle un fondo al texto para que no se vea encima de la imagen:
<h2><span>Floto encima de la imagen:<br />Soy un fantasma</span></h2>
Y el css:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
Espero te sirva de algo. 
0 votos
por (600 puntos)

La propiedad background-image se emplea para establecer la imagen de fondo de cada elemento. La imagen se muestra en la zona que ocupan el contenido y el relleno del elemento, justo hasta su borde.

Para indicar la imagen que se muestra como fondo de un elemento, se utiliza una URL. Los navegadores no restringen el tipo de URL que se pueden utilizar, por lo que pueden ser URL externas/internas y URL relativas/absolutas.

La URL de la imagen que se quiere mostrar se incluye dentro de los paréntesis de la palabra url(). De forma opcional, el valor de la URL se puede encerrar entre comillas simples o entre comillas dobles.

div {
  background-image: url(images/logo.gif);
}
 
h1, h2, h3 {
  background-image: url("imagenes/fondo.png");
}
 
ul li {
  background-image: url('../comun/imagenes/icono.gif');
}
0 votos
por (200 puntos)

Hola espero que esto te sirva:

div {
  border: 2px solid #CCC;
  padding: 1em;
  margin: 1em 0 1em 4em;
  width: 300px;
}
 
<div>
  <img src="imagenes/imagen.png" alt="Imagen genérica" />
  <p>todo el texto que deseo colocar junto con la imagen.</p>
</div>

Se posiciona de forma absoluta la imagen mediante la propiedad position y se indica su nueva posición mediante las propiedades top left:

div img {
  position: absolute;
  top:  50px; 
  left: 50px;
}
La posición la puedes modificar a como desees utilizando la propiedad position.
Saludos.

Preguntas relacionadas

0 votos
3 respuestas
preguntado por David Delgado (20 puntos) Ene 28, 2016 en HTML
0 votos
3 respuestas
0 votos
2 respuestas
preguntado por marianne (20 puntos) Ene 28, 2016 en Java
0 votos
0 respuestas
0 votos
0 respuestas
Bienvenido a Dudas de Programación, donde puedes hacer preguntas y recibir respuestas sobre los problemas más frecuentes de los lenguajes de programación, frameworks de desarrollo y bases de datos que utilices. Foro de Línea de Código

Categorías

...