Como inserir uma imagem em um div

blaster99 disse:

Quiero poner una imagen en la seccion div de cabecera pero al poner la imagen se sale del cuadro cabecera y queda todo desparramado




<html>
<head>
<link href="css/estilos.css" rel="stylesheet" type="text/css">
<title>el rincon de resident evil </title>
</head>
<body>
<div id="principal">
<div id="cabecera">
Cabecera
</div>
<div id="menu">
Menu
</div>
<div id="columnaizq">Columna izquierda Columna izquierda izquierda Columna izquierda Columna izquierda
Columna izquierda
</div>

<div id="columnader">
columna derecha columna derecha columna derecha
columna derecha columna derecha columna derecha columna derecha columna derecha columna derecha columna
</div>
<div class="clear">
</div>
<div id="pie">
Pie de pagina
</div>
</div>

</body>
</html>


::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::



body {

}

#principal {
width: auto;
height: auto;
border: 1px solid #000000;
margin: 20px auto;
}

#cabecera {
height: 100px;
border: 1px solid #000000;
margin: 10px;
}

#menu {
height: 30px;
border: 1px solid #000000;
margin: 10px;
}

#columnaizq{
width: 200px;
border: 1px solid #000000;
margin: 10px;
float: left;
}

#columnader {
width: 605px;
border: 1px solid #000000;
margin: 10px;
float: left;
}

.clear {
clear: both;
}

#pie {
height: 50px;
border: 1px solid #000000;
margin: 10px;
}

Clique para expandir...

<div id="cabecera">
   <div class="imagen-cabecera"></div>
   Cabecera
</div>

.imagen-cabecera {
   width: 100%; /* Ajusta el ancho de la imagen al tamaño del div */
   height: 100%; /* Ajusta la altura de la imagen al tamaño del div */
   background-image: url(tu_ruta_de_la_imagen.jpg); /* Reemplaza "tu_ruta_de_la_imagen.jpg" por la ruta de tu imagen */
   background-position: center; /* Alinea la imagen al centro del div */
   background-repeat: no-repeat; /* Evita que la imagen se repita */
   background-size: cover; /* Ajusta la imagen para que cubra todo el div */
}