Autor Tema: HTML y CSS crear un efecto tapiz de fondo en una página web repitiendo CU01030D  (Leído 4688 veces)

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Aquí os dejo los ejercicios que pide esta entrega nº 30, he tenido problemas con la parte b) del 2º ejercicio, agradecería que alguien me dijera donde ve el error porque me he vuelto loco probando de todo y no hay manera de que me salga.

  b) Una página web debe tener una imagen de pequeño tamaño (por ejemplo 135x135 píxeles) que mediante el uso de la propiedad repeat se expanda como fondo de la página web creando un efecto tapiz.

Esta es la pregunta.

Aquí os dejo el resto de códigos de los otros ejercicios:


Código: [Seleccionar]
EJERCICIO 1

Crea un documento HTML con 4 elementos div de 250 píxeles de ancho y 250 píxeles de alto, todos ellos con un margin de 30 píxeles en todas direcciones y un padding de 30 píxeles en todas direcciones. En cada uno de los elementos div coloca una imagen de fondo diferente y un background-color diferente. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.


<!DOCTYPE html>
<html lang="es">

<head>
<title>Definidion de fondo CSS. background-image y efecto fondo página con papel tapiz, background-repeat</title>
<meta name="description" content="Descripcion de fondo css. background-image y efecto fondo pagina con papel tapiz. ">
<meta name="keywords" content="Definicion de fondo css">
<meta charset="utf-8">
<style>
/*definición de fondo css.background-image y efecto fondo*/
#div1{width: 250px;height: 250px;margin: 30px;padding: 30px;background-color: yellow;background-image: url(https://i.ytimg.com/vi/6rLuO37DSUM/hqdefault.jpg)}
.div2{width: 250px;height: 250px;margin: 30px;padding: 30px;background-color: orange;background-image: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSZ1frib1PqeHmIq3nudJIHbxKrCsjkbxIfQf7T9g6Py4f3igbR")}
#div3{width: 250px;height: 250px;margin: 30px;padding: 30px;background-color: green;background-image: url("http://imagenesdebuenosdiasamor.com/wp-content/uploads/2015/09/buenosdiasregalorosa.jpg")}
.div4{width: 250px;height:250px;margin: 30px;padding: 30px;background-color: gray;background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS1TPUNunORNxgvUPW_mgznqRptBkt98u7TDR_h2lOYx_7rfIpRoQ")}
</style>


</head>

<body>

<div id="div1">


</div>

<div class="div2">


</div>

<div id="div3">

</div>

<div class="div4">


</div>
</body>
</html>


EJERCICIO 2

Crea dos páginas web cumpliendo estos requisitos:

a) Una página web debe tener una única imagen de gran tamaño (por ejemplo 1024x768 píxeles) como imagen de fondo, sin repetición de la misma.



<!DOCTYPE html>
<html lang="es">

<head>
<title>Web con imagen única de gran tamaño</title>
<meta name="description" content="web con imagen unica de gran tamaño (1024*768px)">
<meta name="keywords" content="imagen de 1024*768px ">
<meta charset="utf-8">
<style>

#imagen{background-color: yellow;background-image: url("http://www.imagenesderisa.com.mx/wp-content/uploads/2015/10/imagenes-graciosas-1.jpg" width="1024" height="768");margin 0 auto;background-repeat: no repeat;}


</style>

</head>

<body>
2º Ejercicio a)

<div id="imagen">

<img src="http://www.imagenesderisa.com.mx/wp-content/uploads/2015/10/imagenes-graciosas-1.jpg" width="1024" height="768">

</div>

</body>
</html>

b) Una página web debe tener una imagen de pequeño tamaño (por ejemplo 135x135 píxeles) que mediante el uso de la propiedad repeat se expanda como fondo de la página web creando un efecto tapiz.

Este es el ejercicio que no me funciona!!!!!!!


<!DOCTYPE html>
<html lang="es">

<head>
<title>Web con imagen única de pequeño tamaño</title>
<meta name="description" content="web con imagen unica de pequeño tamaño 135*135 pixeles">
<meta name="keywords" content="imagen de 135*135 pixeles">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos13.css">

</head>

<body>



<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
</div>
</div>
<div id="footer">
</div>
</div>




</body>


</html>

y ahora el CSS

/*background-image propiedad repeat se expanda como fondo de página web*/



body {background-color: yellow;background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR0HLGaq8ZZPQpgXgv01Gb_eGTO-Y_gI6eUEUg7m6iMczff9RQ2JQ" width="300" height="300");
background-repeat: repeat;}



Saludos y gracias
« Última modificación: 29 de Febrero 2016, 13:59 por César Krall »

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:Ejercicio CU01030D del curso de CSS. Definición de fondo
« Respuesta #1 en: 28 de Febrero 2016, 19:26 »
A ver si esto te ayuda

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

<head>
<title>Web con imagen única de pequeño tamaño</title>
<meta name="description" content="web con imagen unica de pequeño tamaño 135*135 pixeles">
<meta name="keywords" content="imagen de 135*135 pixeles">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos13.css">
<style>
    body {
        background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR0HLGaq8ZZPQpgXgv01Gb_eGTO-Y_gI6eUEUg7m6iMczff9RQ2JQ");
        background-repeat: repeat;}
</style>
    </head>
    <body>
<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Re:Ejercicio CU01030D del curso de CSS. Definición de fondo
« Respuesta #2 en: 28 de Febrero 2016, 19:47 »
Muchas gracias tenias razón  le daba color de fondo y pixeles a la imagen y ahí estaba el error
no me había fijado antes muchas gracias por la ayuda otra vez.

saludos   

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Re:Ejercicio CU01030D del curso de CSS. Definición de fondo
« Respuesta #3 en: 28 de Febrero 2016, 19:56 »
Aquí os dejo el código rectificado.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
<title>Web con imagen única de pequeño tamaño</title>
<meta name="description" content="web con imagen unica de pequeño tamaño 135*135 pixeles">
<meta name="keywords" content="imagen de 135*135 pixeles">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos13.css">

</head>

<body>



<div id="page">
<div id="header">
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
</div>
</div>
<div id="footer">
</div>
</div>




</body>


</html>


y ahora el CSS

Código: [Seleccionar]

/*background-image propiedad repeat se expanda como fondo de página web*/



body {background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR0HLGaq8ZZPQpgXgv01Gb_eGTO-Y_gI6eUEUg7m6iMczff9RQ2JQ");
background-repeat: repeat;}



 

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".