Cómo insertar una imagen en un div

blaster99 · 2023-08-25T09:13:05-0600

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

beritamartinez · 2023-08-25T17:54:51-0600

Subo hilo a ver si alguien te puede ayudar.

Cicklow · 2023-08-25T17:56:59-0600

blaster99 dijo:
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;
}

Para insertar una imagen dentro del div de cabecera y evitar que se salga del mismo, puedes utilizar la propiedad CSS background-image.

En tu código HTML, puedes agregar una etiqueta div dentro del div de cabecera y utilizar la clase "imagen-cabecera" para darle estilo:

HTML:

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

Luego, en tu archivo de estilos CSS, puedes agregar lo siguiente:

CSS:

.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 */
}

Asegúrate de reemplazar "tu_ruta_de_la_imagen.jpg" con la ruta de tu imagen. Esto debería insertar la imagen dentro del div de cabecera y evitar que se salga del mismo.

lalilalilali · 2023-08-25T18:02:41-0600

Quieres hacerla responsiva? https://www.freecodecamp.org/espano...er-que-las-imagenes-sean-responsivas-con-css/

Puko · 2023-08-25T18:05:33-0600

#cabecera {
height: 100px;
border: 1px solid #000000;
margin: 10px;
background: url(https://forobeta.com/uploads/forobeta-logo.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}

previo...

blaster99 · 2023-08-26T08:46:13-0600

siiii muchas gracias lo probare enseguida

Cómo insertar una imagen en un div

blaster99 Seguir

beritamartinez

Cicklow

lalilalilali

Puko

blaster99