¿como colocar una imagen de fondo en un div?

0 votos
preguntado por gerardo (330 puntos) Jul 19, 2016 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
respondido por MichelleRivera (300 puntos) Jul 20, 2016

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
respondido por lorena elideth (700 puntos) Jul 25, 2016

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
respondido por Carolina Vazquez (300 puntos) Jul 31, 2016

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 (120 puntos) Ene 28, 2016 en HTML
0 votos
3 respuestas
0 votos
2 respuestas
preguntado por marianne (120 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
...