Autor Tema: Centrar imagen de fondo CSS background-position, attachment (CU01031D) (Leído 4707 veces)

jimmorrison · « **en:** 23 de Abril 2015, 04:14 »

Enunciado:

Citar

Crea un documento HTML con 4 elementos div de 400 píxeles de ancho y 400 píxeles de alto, todos ellos con un margin de 40 píxeles en todas direcciones y un padding de 40 píxeles en todas direcciones. En cada uno de los elementos div crea un borde y coloca una imagen de fondo diferente y un background-color diferente. Usa la propiedad background-position para hacer que la imagen esté centrada tanto vertical como horizontalmente respecto al borde del div (por ejemplo, si una imagen mide 100x100 píxeles, deberá existir la misma distancia hasta el borde del div en las cuatro direcciones).

Respuestas:

html

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>

css

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);
background-color: purple;
background-size: 480px 480px;
background-repeat: no-repeat;
}

#caja_2{
background-image: url(https://encrypted-

tbn2.gstatic.com/images?q=tbn:ANd9GcQq3-

tT90U2KikyS6GRyUjTPwH8G8MKDY9Hif7ZQ2QEKxYf32Qe);
background-color: orange;
background-size: 480px 480px;
background-repeat: no-repeat;
}

#caja_3{
background-image: url(http://life-

famous.com/celebrities/jim-morrison/jim-morrison-01.jpg);
background-color: orange;
background-size: 440px 440px;
background-repeat: no-repeat;
background-position: 20px 20px;
}

#caja_4{
background-image: url(https://encrypted-

tbn3.gstatic.com/images?

q=tbn:ANd9GcRZe5AvsN7toIAt4c04Kb4NJVy8xsggf4_TmaJKC4td8A6

jtUMX7g);
background-color: black;
background-size: 440px 440px;
background-repeat: no-repeat;
background-position: 20px 20px;
}

César Krall · « **Respuesta #1 en:** 23 de Abril 2015, 12:08 »

Hola donde dice

marigin: 0px;
padding: 0px;
}

debe decir

*{
margin: 0px;
padding: 0px;
}

También hay algún problema cuando pegas el código por ejemplo se pega

#caja_2{
background-image: url(https://encrypted-

tbn2.gstatic.com/images?q=tbn:ANd9GcQq3-

tT90U2KikyS6GRyUjTPwH8G8MKDY9Hif7ZQ2QEKxYf32Qe);

Cuando lo correcto sería

#caja_2{
background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQq3-tT90U2KikyS6GRyUjTPwH8G8MKDY9Hif7ZQ2QEKxYf32Qe);

Por eso si se copia el código como lo has pegado no se ven las imágenes

Lo demás el ejercicio está bien

Saludos!!

jimmorrison · « **Respuesta #2 en:** 23 de Abril 2015, 16:08 »

ya revise mi codigo y se ve bien en mi bloc de notas el problema es cuando lo paso aqui se modifica siempre, voy a tener que revisar bien cuando lo pase al foro.

gracias cesar

César Krall · « **Respuesta #3 en:** 24 de Abril 2015, 12:09 »

Hola si lo estás haciendo con bloc de notas en el menú Formato hay una opción "Ajuste de línea", desactívala para ver si así se corrige el problema.

Saludos!!

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

Noticias:

Autor Tema: Centrar imagen de fondo CSS background-position, attachment (CU01031D) (Leído 4707 veces)

jimmorrison

Centrar imagen de fondo CSS background-position, attachment (CU01031D)

César Krall

Re:Centrar imagen de fondo CSS background-position, attachment (CU01031D)

jimmorrison

Re:Centrar imagen de fondo CSS background-position, attachment (CU01031D)

César Krall

Re:Centrar imagen de fondo CSS background-position, attachment (CU01031D)

Preguntas y respuestas