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

jimmorrison · « **en:** 21 de Abril 2015, 03:49 »

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)
}

jimmorrison · « **Respuesta #1 en:** 21 de Abril 2015, 04:44 »

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)

Ogramar · « **Respuesta #2 en:** 21 de Abril 2015, 09:08 »

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 · « **Respuesta #3 en:** 21 de Abril 2015, 09:21 »

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 · « **Respuesta #4 en:** 21 de Abril 2015, 13:34 »

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 · « **Respuesta #5 en:** 21 de Abril 2015, 13:39 »

el ejercicio A lo puse en otro apartado con el mismo nombre

Ogramar · « **Respuesta #6 en:** 21 de Abril 2015, 17:20 »

ok, no me había dado cuenta

Salu2

jimmorrison · « **Respuesta #7 en:** 23 de Abril 2015, 03:09 »

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{}

jimmorrison · « **Respuesta #8 en:** 23 de Abril 2015, 03:49 »

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

Ogramar · « **Respuesta #9 en:** 23 de Abril 2015, 08:39 »

Ok, ahí diste con la respuesta

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

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

jimmorrison

HTML Poner imágenes de fondo y color CSS. background-image CU01030D# ejercicio

jimmorrison

Poner fondo de tapiz a una web con background-image CSS (CU01030D) ejercicio 2

Ogramar

Re:Poner imágenes de fondo y color CSS. background-image (CU01030D) ejercicio 1

Ogramar

Re:Poner fondo de tapiz a una web con background-image CSS (CU01030D) ejercicio 2

jimmorrison

Re:Poner imágenes de fondo y color CSS. background-image (CU01030D) ejercicio 1

jimmorrison

Re:Poner fondo de tapiz a una web con background-image CSS (CU01030D) ejercicio 2

Ogramar

Re:Poner fondo de tapiz a una web con background-image CSS (CU01030D) ejercicio 2

jimmorrison

Re:Poner fondo de tapiz a una web con background-image CSS (CU01030D) ejercicio 2

jimmorrison

Re:Poner fondo de tapiz a una web con background-image CSS (CU01030D) ejercicio 2

Ogramar

Re:Poner fondo de tapiz a una web con background-image CSS (CU01030D) ejercicio 2

Preguntas y respuestas