Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Pandemia en 28 de Febrero 2016, 23:20
-
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
<!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>
-
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
-
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
-
Hola, pega el código que te da problemas para revisarlo
Saludos
-
Este es el código, gracias por revisarme lo de ante mano
saludos
<!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>
-
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>
-
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.