Autor Tema: Centrar una imagen de fondo con HTML y CSS. background-image CU01030D (Leído 27894 veces)

Lorenzo31 · « **en:** 16 de Febrero 2016, 23:04 »

Buenas, dejo las respuestas para el ejercicio.

Ejercicio 1

<!DOCTYPE html>
<html>
	<head> <meta charset="utf-8"/> 
		   <link rel="stylesheet" type="text/css" href="estilos130D.css"/>
	</head>
	<body>
		<div id="primera"></div>
		<div id="segunda"></div>
		<div id="tercera"></div>
		<div id="cuarta"></div>
	</body>
</html>

estilos130D.css

Código: [Seleccionar]

html {background-image:url(http://2.bp.blogspot.com/_EZ16vWYvHHg/S-Bl2fuyyWI/AAAAAAAAMKc/DNayYJK8mEo/s1600/www.BancodeImagenesGratuitas.com-Fantasticas-20.jpg); }
body {background-color: yellow; width: 80%; margin:auto; border:solid; background-color:blue;}
div {width:250px; height:250px; margin:30px; padding:30px; }
#primera {background-image:url(http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg?1399003306);
         background-color:#FF00FF;}
#segunda { background-image:url(http://img.emol.com/2012/01/25/impresionante-imagen-tierra_14302.jpg);
		 background-color:#00FFFF; }
#tercera { background-image:url(http://ceibal.elpais.com.uy/wp-content/uploads/2014/01/cerebro-imagen-procesa.jpg);
          background-color:blue;}
#cuarta { background-image:url(http://1079638729.rsc.cdn77.org/pic/v2/gallery/preview/art-risunki-volki-zhivotnye-16168.jpg);
			background-color:red;}

Ejercicio 2

A

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head> <meta charset="urf-8"/>
	<link rel="stylesheet" type="text/css" href="estilos130DDos.css"/>
	</head>
	
	<body>
		
	
	</body>
</html>

estilos130DDos.css

Código: [Seleccionar]

html{width:1024px; height:768px; background-image:url(http://es.best-wallpaper.net/wallpaper/1024x768/1105/Magic-Earth_1024x768.jpg);
    background-color:red; background-repeat:no-repeat; margin:auto;}

B

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head> <meta charset="utf-8"/>
		<link rel="stylesheet" type="text/css" href="estilos130DTres.css"/>
	</head>
	<body>
	</body>
</html>

estilos130DTres.css

Código: [Seleccionar]

html {background-image:url(http://vignette3.wikia.nocookie.net/pixelpeople/images/9/97/Penguin.png/revision/latest?cb=20130411214626);
       background-color:red;}

Mario R. Rancel · « **Respuesta #1 en:** 18 de Febrero 2016, 23:13 »

Hola,

en el ejercicio 1 bonitas imágenes.

Al establecer una background-image sobre el elemento html y definir un width del 80% para el body creas un efecto de imagen de fondo (esto no lo pedía el ejercicio). Muchas veces esto se hace definiendo la background-image para body y un div como contenedor para los distintos elementos.

body {background-color: yellow; width: 80%; margin:auto; border:solid; background-color:blue;} tiene una incongruencia: repites dos veces background-color. El efecto cuando ocurre esto es que se aplica el último estilo definido, en este caso lo que se aplicaría sería el background-color blue. De resto todo bien (has agrupado bien las características comunes a los div, aplicando luego las específicas a los id).

En el ejercicio 2-a también bonita imagen. En lugar de margin:auto; es más estándar margin:0 auto; y claro hay que cambiar charset="urf-8"

Una forma alternativa sería:

Código: [Seleccionar]

body{background-image:url(http://es.best-wallpaper.net/wallpaper/1024x768/1105/Magic-Earth_1024x768.jpg);
    background-color:red; background-repeat:no-repeat; background-position: center top;}

En el ejercicio 2-b es una pena que el pinguino se vea tan pixelado. Aquí también puedes aplicar la regla sobre body en lugar de sobre el elemento html.

Código: [Seleccionar]

body {background-image:url(http://vignette3.wikia.nocookie.net/pixelpeople/images/9/97/Penguin.png/revision/latest?cb=20130411214626); background-color:red;}

Saludos

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

Noticias: