Hola Pandemia,
tienes que empezar a acostumbrarte a escribir el código CSS de otra manera, yo te recomienso que cada caracterítica lo escribas en distinta linea porque te será más fácil encontrar las cosas.
Otra cosa que quería comentarte que tienes que definir el origen de las etiquetas de otra manera.
div div div div {
.........
}
Eso es una cadena de div que no facilita la lectura del código, si tiene algún id nombraro sino vale la pena que lo hagas.
o --> div#identificador , o bien --> #identificador
Bueno al grano, no he mirado el enunciado del ejercicio pero puede ser que no te funcione porque has puesto background: no repeat, en vez de background:no-repeat.
<!DOCTYPE html>
<html lang="es">
<head>
<title>CSS background position attachment; clip origin y size</title>
<meta name="description" content="aprenderaprogramar.com">
<meta name="keywords" content="posicion de imagenes de fondo">
<meta charset="utf-8">
<style>
div div div div {
width: 400px;
height: 400px;
margin: 40px;
padding: 40px;
border: solid 4px black;
}
#imagen1{
background-image: url("http://www.ecoosfera.com/wp-content/imagenes/22-de-abril-dia-de-la-tierra.jpg");
background-color: yellow;
background-position: center;
background-repeat: no-repeat;
}
#imagen2{
background-image: url("http://estaticos04.elmundo.es/assets/multimedia/imagenes/2015/12/21/14506973737666.jpg");
background-color: blue;
background-position: center;
background-repeat: no-repeat;
}
#imagen3{
background-image: url("http://static.batanga.com/sites/default/files/curiosidades.batanga.com/files/Apuesto-que-no-conocias-estos-15-datos-interesantes-sobre-la-Tierra.jpg");
background-color: green;
background-position: center top;
background-repeat: no-repeat;
}
#imagen4{
background-image: url("https://imagenesyfondos.files.wordpress.com/2012/12/planeta_tierra.jpg");
background-color: pink;
background-position: center;
background-repeat: no repeat;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1>Imagenes de fondo</h1>
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<div id="imagen1"></div>
<div id="imagen2"></div>
<div id="imagen3"></div>
<div id="imagen4"></div>
</div>
</div>
<div id="footer">
Realizado por PANDEMIA
</div>
</div>
</body>
</html>