Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Chompy129 en 08 de Septiembre 2016, 02:10
-
CSS background-position, background-attachment, clip, origin y size. Shorthand fondo. Ejemplos (CU01031D)
Aquí esta la resolución del ejercicio:
Código HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio CU01031D</title>
<link rel="stylesheet" type="text/css" href="Fondo.css">
</head>
<body>
<h2>Imagenes de fondo con CSS</h2>
<div id="Div1"></div>
<div id="Div2"></div>
<div id="Div3"></div>
<div id="Div4"></div>
</body>
</html>
Código CSS
/*Color de fondo principal*/
body{background-color: #CCC;}
/*Titulos H2*/
h2{margin-left: 40px; text-decoration: underline; width: 400px; text-align: center}
/*Datos generales Div*/
div{width: 400px; height: 400px;
margin: 40px; padding: 40px;
border: 6px double hsl(240, 100%, 20%);
background-position: 50%;}
/*Div Individuales*/
#Div1{background-color: purple; background-image: url(http://www.mstudio.es/wp-content/uploads/o-fotografias-atardecer-en-san-juan-400x400.jpg);
background-repeat: no-repeat;}
#Div2{background-color: blue; background-image: url(http://jeoxphotography.com/wp-content/uploads/2015/07/q5a3610-400x400.jpg);
background-repeat: no-repeat;}
#Div3{background-color: red; background-image: url(http://www.nortenosa.com/wp-content/uploads/2016/03/Dia-de-Naturaleza-400x400.png);
background-repeat: no-repeat;}
#Div4{background-color: yellow; background-image: url(http://jeoxphotography.com/wp-content/uploads/2015/07/q5a3451-400x400.jpg);
background-repeat: no-repeat;}
-
Buenas Chompy129.
El ejercicio hace lo que pedía el enunciado, por lo tanto está bien.
Algún detalle he encontrado, en el css que aplicas al "h2" en la línea "text-align: center" te falta un ";", si no se pone, no se ejecuta.
Esta línea "background-repeat: no-repeat;", la repites cuatro veces y podrías colocarla dentro de "div {...}". Es importante repetir lo menos posible.
Saludos. ;D
-
Hola!
De vez en cuando se me olvida poner el ";" al final de una linea de codigo, pero tratare de siempre colocarla y también tratare de repetir lo menos posible el mismo valor.
Gracias por revisarlo pedro. ;)