Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: LuisM en 30 de Noviembre 2017, 23:27

Título: CSS background-position, background-attachment, clip Shorthand fondo CU01031D
Publicado por: LuisM en 30 de Noviembre 2017, 23:27
Hola a todos !! Paso a dejar el ejercicio de la clase CU01031D del curso pdf de programación web CSS. Desde ya muchas gracias por la atención. Un saludo,

Luis

Aclaración: Para calcular las posiciones "absolutas"(en px) desde donde colocar la imagen de fondo en los div 3 y 4, realicé las siguientes operaciones:

div 3) La imágen es de 310x310 px.

Cálculo de la posición horizontal es :

margin(40px)+(width del div-ancho de la imagen)/2=
40px+(400px-310px)/2=85px

div 4) La imágen es de 128x128 px.

Cálculo de la posición horizontal es :

margin(40px)+(width del div-ancho de la imagen)/2=
40px+(400px-128px)/2=176px

Cálculo de la posición vertical es :

4 x margin(40px) + 3 x div(400px)+(height del div-alto de la imagen)/2=
160px+1200px+(400px-128px)/2=1496px

Citar
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). Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.


Página HTML

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>"Ejercicio CU01031D"</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="estilos.css">
</head>
<body>
  <div id="div1">
DIV 1
  </div>
  <div id="div2">
DIV 2
  </div>
  <div id="div3">
DIV 3
  </div>
  <div id="div4">
DIV 4
  </div>
</body>
</html>


Hoja de estilo: estilos.css

Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/
*{margin:0;
}
div {width:400px; height:400px;
margin:40px;
padding:40px;

}
#div1{
border-width:10px;
border-style:dotted;
background-repeat:no-repeat;
background-position:50%,50%;
background-color:#FF5733;
background-image:url("https://i.imgur.com/A0HaQVA.jpg?1");
}
#div2{
border-width:20px;
border-style:double;
background-repeat:no-repeat;
background-position:center,center;
background-color:#33E3FF;
background-image:url("https://i.imgur.com/HsbDBxY.png?1");
}
#div3{
border-width:30px;
border-style:dashed;
background-repeat:no-repeat;
background-position:85px,50%;
background-color:#F6FF33;
background-image: url("https://i.imgur.com/hqkYtoG.jpg?7");
}
#div4{
border-width:40px;
border-style:groove;
background-repeat:no-repeat;
background-position:176px,1496px;
background-color:#93FF33;
background-image: url("https://i.imgur.com/p8yLvlY.png");
}
Título: Re:CSS background-position,background-attachment,clip,etc.Shorthand fondo CU01031D
Publicado por: KOFFERO en 05 de Diciembre 2017, 00:19
Hola Luis!!!
Bien resuelto tu ejercicio, pero te recomiendo una cosita, repites la propiedad "background-repeat: no-repeat;" en todos los div, podrias ahorrarte menos tiempo agregando esa línea una sola vez para todos los div, también para el centrado de las imágenes así:
Código: [Seleccionar]
div {width:400px;
                   height:400px;
                      margin:40px;
                          padding:40px;
                             background-repeat:no-repeat;
                         background-position:50%,50%;
}
En este caso te ahorras menos código. ¡También muy bueno eso de calcular la position absoluta! ¡¡¡Bien hecho!!! 8)


Un saludo. :D :D