« anterior próximo »
Páginas: [1]

Autor Tema: CSS centrar imagen dentro de contenedor div background-position CU01031D# curso  (Leído 3070 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
CSS centrar imagen dentro de contenedor div background-position CU01031D# curso
« en: 12 de Enero 2016, 21:11 »
Solución del ejercicio CU01031D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<meta name="keywords" content="programar,cursos">
<link rel="stylesheet" type="text/css" href="estilos43.css">
<title>Ejemplo de background-attachment</title>
</head>
<body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Código CSS: "estilos43.css"

Código: [Seleccionar]
div div div div {
width: 400px;
height: 400px;
margin: 40px;
padding: 40px;
border: solid 2px;
}
#a {
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: red;
}
#b {
background-image: url(2.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: blue;
}
#c {
background-image: url(1.png);
background-repeat: no-repeat;
background-position: center;
background-color: yellow;
}
#d {
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: green;
}
« Última modificación: 01 de Marzo 2016, 19:06 por Alex Rodríguez »
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Re:CSS centrar imagen dentro de contenedor div background-position CU01031D curso
« Respuesta #1 en: 15 de Enero 2016, 18:52 »
Buenas dimiste lo veo bien

Lo ya comentado, recomendaría eliminar el código "vacío" como

<div id="header">
</div>

Salu2
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".