Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Jack_F en 06 de Febrero 2017, 07:10
-
CSS background-position, background-attachment, clip, origin y size. Shorthand fondo. Ejemplos (CU01031D)
Hola amigos como estan espero que bien, aqui dejo el ejercicio del curso de fundamentos de programación web con CSS.
EJERCICIO
Crea un documento HTML con 4 elementos div de 400 píxeles de ancho y 400 píxeles de alto, todos ellos con un margin de 40 píxeles en todas direcciones y un padding de 40 píxeles en todas direcciones. En cada uno de los elementos div crea un borde y coloca una imagen de fondo diferente y un background-color diferente. Usa la propiedad background-position para hacer que la imagen esté centrada tanto vertical como horizontalmente respecto al borde del div (por ejemplo, si una imagen mide 100x100 píxeles, deberá existir la misma distancia hasta el borde del div en las cuatro direcciones).
Código HTML
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio CU01031D - aprenderaprogramar.com, Jorgito Pucheta</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<div class="Div1"></div>
<div class="Div2"></div>
<div class="Div3"></div>
<div class="Div4"></div>
</body>
</html>
Código CSS
/*Una imagen de fondo para toda la pagina*/
body{
background-image:url(http://i44.photobucket.com/albums/f30/Jack_f1/img4_zps9bk4wtx1.png);
}
/*aqui va la anchura, altura, margen y el relleno*/
div{
width:400px;
height:400px;
margin:40px;
padding:40px;
background-repeat:no-repeat;
background-position:50% 50%;
}
/*Aqui va el border, imagen y color de fondo de los div*/
div.Div1{
border:double red 5px;
background-image:url(http://i44.photobucket.com/albums/f30/Jack_f1/notepad_zpsuwevojf8.png);
background-color:#349b14;
}
div.Div2{
border:inset #307e62 4px;
background-image:url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQTVOZciLSq4PJL1Bwh8WsF-aqR1j6_Z4PmIPuVBDuR6dZNtRh6);
background-color:#45317e;
}
div.Div3{
border:outset #b84573 4px;
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQH_sBuL5A3OaEQxI9m886cwcrPOdG1JFadnFRESZjuQcd7Awr_);
background-color:#bc1c20;
}
div.Div4{
border:solid #2fbc1c 5px;
background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuKiHErw3DUKIw50DBdRIVprxY-9NoC6i12y2g3xqWakj_heCDAw);
background-color:#88bacd;
}
-
Hola Jorgito Pucheta.
El ejercicio es correcto.
Saludos. ;D