Autor Tema: HTML y CSS Imagenes de fondo Background-position Contenedores Ejercicio CU01031D (Leído 2344 veces)

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

Código: [Seleccionar]

<!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

Código: [Seleccionar]

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

pedro,, · « **Respuesta #1 en:** 10 de Septiembre 2016, 11:30 »

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.

Chompy129 · « **Respuesta #2 en:** 11 de Septiembre 2016, 07:33 »

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.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: