Autor Tema: CSS HTML background-position imagen de fondo centrada no-repeat código CU01031D  (Leído 4695 veces)

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Aquí os dejo el ejercicio que he realizado haber que os parece, en la tercera imagen me sale una linea negra que no logro quitar, haber si alguien me puede echar una mano.

Gracias por vuestro tiempo, estoy aprendiendo mucho gracias a vosotros.

saludos


Código: [Seleccionar]

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

#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("https://i.ytimg.com/vi/0yc-Lal-FA0/maxresdefault.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>

« Última modificación: 04 de Marzo 2016, 10:11 por Mario R. Rancel »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Ejercicio CU01031D de CSS background-position imagen de fondo
« Respuesta #1 en: 01 de Marzo 2016, 19:10 »
Hola Pandemia

Creo que usas un excesivo anidamiento de div (uno dentro de otro). Por ejemplo el <div id="page"> abarca todo el body, podrías haber prescindido de él.

Por otro lado, al usar imágenes más grandes que el div, no se puede ver el efecto de centrado ni se puede ver el color de fondo. Deberías corregir esto usando imágenes más pequeñas para poder apreciar los resultados del ejercicio.

Saludos

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Re:Ejercicio CU01031D de CSS background-position imagen de fondo
« Respuesta #2 en: 01 de Marzo 2016, 21:00 »
Buenas noches Alex he retocado el html como me has dicho y al quitarle el div id="page
se me van todas las imágenes y cuando las puse ya comprobé que fuesen mas pequeñas que las medidas que nos daban.
No se que puede pasar!!!

gracias por tu tiempo

saludos

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Ejercicio CU01031D de CSS background-position imagen de fondo
« Respuesta #3 en: 01 de Marzo 2016, 22:55 »
Hola, pega el código que te da problemas para revisarlo

Saludos

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Re:Ejercicio CU01031D de CSS background-position imagen de fondo
« Respuesta #4 en: 02 de Marzo 2016, 01:03 »
Este es el código, gracias por revisarme lo de ante mano

saludos
Código: [Seleccionar]

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

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


bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:Ejercicio CU01031D de CSS background-position imagen de fondo
« Respuesta #5 en: 02 de Marzo 2016, 12:54 »
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.
Código: [Seleccionar]
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.
Código: [Seleccionar]
<!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>

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Re:Ejercicio CU01031D de CSS background-position imagen de fondo
« Respuesta #6 en: 02 de Marzo 2016, 18:09 »
Tenias razón el error estaba en background: no repeat, es background: no-repeat, lo he probado y ahora sale todo ok.

Y en cuanto a la manera de colocar el código tienes razón se ve mucho más claro como me has enseñado tú, es que soy novato en todo esto y cada día aprendo algo nuevo y la verdad es que me gusta mucho y quiero seguir aprendiendo; me has ayudado mucho agradezco el tiempo que te has tomado.

saludos.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".