¿como colocar una imagen de fondo en un div?

Question

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

Answer 1

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. 

Answer 2

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');
}

Answer 3

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 y left:

div img {
  position: absolute;
  top:  50px; 
  left: 50px;
}

La posición la puedes modificar a como desees utilizando la propiedad position.

Saludos.