Autor Tema: HTML Poner imágenes de fondo y color CSS. background-image CU01030D# ejercicio  (Leído 8106 veces)

jimmorrison

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 51
  • la programacion es vida
    • Ver Perfil
Enunciado ejercicio CU01030D del tutorial de fundamentos de programación web con CSS usando Notepad++ como editor:

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

Respuesta:

html

Código: [Seleccionar]
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar

con border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_background_image.css">
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>

<div id="caja_1" class="cajas">
Caja 1
</div>
<div id="caja_2" class="cajas">
Caja 2
</div>
<div id="caja_3" class="cajas">
Caja 3
</div>
<div id="caja_4" class="cajas">
Caja 4
</div>
<footer id="pie_de_pagina">
Hecho por carlos enrique gil chong
</footer>
</body>
</html>

css

Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;
}

*{font-family: arial;
text-align: center;}

body{
background-color: yellow;}

.cajas{
width: 250px;
height: 250px;
margin: 30px;
padding: 30px;
color: white;
}

#caja_1{
background-color: purple;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIwlR_9cgOX0ZYaPow6HUmnSYBZsaMYFxdrUelCoMcjjFHE7eD);
}

#caja_2{
background-color: silver;
background-image: url(http://k39.kn3.net/taringa/C/C/C/3/9/D/agente867/745.jpg);
}

#caja_3{
background-color: orange;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBHmlrkbC6StIm947mrAwfnqmN0zbg55e3KuwNm3FRx0H_PB02Hw);
}


#caja_4{
background-color: red;
background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRW7g3sM7R8X7cURFla1HBiGnAX7lqCXiiOsDPWyRQSpKvCBpD9jw)
}
« última modificación: 24 de Septiembre 2017, 19:09 de Alex Rodríguez »

jimmorrison

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 51
  • la programacion es vida
    • Ver Perfil
Citar
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.

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.

html

Código: [Seleccionar]
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar

con border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio2_1_background_image.css">
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>

<div id="caja_1" class="cajas">
Caja 1
</div>

<footer id="pie_de_pagina">
Hecho por carlos enrique gil chong
</footer>
</body>
</html>

css

Código: [Seleccionar]
*{
margin: 0px;
padding: 0px;
}

*{
font-family: arial;
text-align: center;
}


body{
background-image: url(http://www.marketingdirecto.com/wp-content/uploads/2012/09/mundo2.gif);
}


pregunta:
¿estas propiedades sirven con  src = img()?

ejemplo
html
src img=(ruta);

css
img{
width: 136px;
height: 136px;
background: repeat;
}

mas o menos a eso me refiero 
repeat (repetición horizontal y vertical)
repeat-x (repetición sólo horizontal)
repeat-y (repetición sólo vertical)
no-repeat (la imagen se muestra sólo una vez, sin repeticiones)
« última modificación: 21 de Abril 2015, 09:14 de Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2448
    • Ver Perfil
Hola, ejercicio perfecto. Tener en cuenta que el background-color no se verá al estar delante la imagen, excepto si la imagen no se pudiera cargar, en ese caso sí se vería el color de fondo.

Salu2

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2448
    • Ver Perfil
Hola veo que has puesto dos reglas css *{...} pero lo correcto sería poner una sola y dentro de esa regla poner todas las propiedades que quieras.

El código que has enviado corresponde al apartado b), te faltaría el apartado a).

Sobre la pregunta, a los elementos img le puedes aplicar las mismas reglas que al resto de elementos pero esto no se suele hacer porque a una imagen no se le suele colocar otra imagen de fondo, aunque podrías hacerlo. Puedes hacer pruebas y ver los resultados.

Salu2

jimmorrison

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 51
  • la programacion es vida
    • Ver Perfil
yo pense que para eso ero fue el ejercicio en caso que la imagen no se pudiera ver con el background color podria tener un color de fondo indicando falla al cargar imagen o error.

jimmorrison

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 51
  • la programacion es vida
    • Ver Perfil
el ejercicio A lo puse en otro apartado con el mismo nombre

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2448
    • Ver Perfil
ok, no me había dado cuenta

Salu2

jimmorrison

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 51
  • la programacion es vida
    • Ver Perfil
una pregunta maestros  que tengo desde que inicie a estudiar html y css

Si busco una imagen en el buscador (x) por ejemplo imagen.jpg  (2206x1519)  si quiero que aparesca la imagen completa dentro de una caja por ejemplo de 600 x 600  o viceversa si la imagen es pequeña y quiero colocarla en una caja mas grande.

nota: un compañero me dijo que se distorsiona las imagenes

 un ejemplo

Código: [Seleccionar]
<!Doctype hmtl>
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar con

border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_propiedades_background.css">
</head>
<body>

<div id="caja_1" class="cajas">
caja
</div>

<div id="caja_2" class="cajas">
caja
</div>

<div id="caja_3" class="cajas">
caja
</div>

<div id="caja_4" class="cajas">
caja
</div>

<footer id="pie_de_pagina">
Hecho por carlos enrique gil chong
</footer>
</body>
</html>

Código: [Seleccionar]
*{
marigin: 0px;
padding: 0px;
}

body{
text-align: center;
background-color: silver;}

.cajas{
width: 400px;
height: 400px;
margin: 40px;
padding: 40px;
border: solid white 5px;
}

#caja_1{
background-image: url(http://coyotechronicle.net/wp-

content/uploads/2014/05/real-madrid-logos-

0424182101.jpg);}

#caja_2{}

#caja_3{}

#caja_4{}



« última modificación: 23 de Abril 2015, 03:12 de jimmorrison »

jimmorrison

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 51
  • la programacion es vida
    • Ver Perfil
encontre la respuesta en el siguiente modulo disculpen

Código: [Seleccionar]
#caja_1{
background-image: url(http://coyotechronicle.net/wp-content/uploads/2014/05/real-madrid-logos-0424182101.jpg);
background-size: 400px 400px;
background-repeat: no-repeat;
}
« última modificación: 23 de Abril 2015, 08:38 de Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2448
    • Ver Perfil
Ok, ahí diste con la respuesta  ;D

 

Esto es un laboratorio de ideas...
Aprender a programar

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