Autor Tema: HTML y CSS centrar imagen vertical y horizontal background-position CU01031D (Leído 2869 veces)

EnigmaticNerd · « **en:** 01 de Septiembre 2017, 02:19 »

Buenas noches. Este es el enunciado del ejercicio CU01031D del curso básico de programación web con CSS:

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

Acá el código:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01031D
        </title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilos/CU01031.css">
        
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

Acá la hoja de estilos css:

Código: [Seleccionar]

/*Estilos CU01031*/
*{
    margin: auto 20%;
}
div{
    width:400px; 
    height:400px; 
    margin:40px;
    padding:40px;
    border:1px solid blue;
    background-position: center;
}

body div:first-child{
    background-image:url("../../imagenes/vida.jpg");
    
    background-color:yellow;
}

body div:nth-child(2){
    background-image:url("../../imagenes/vida1.jpg");
    background-color: salmon;
}

body div:nth-child(3){
    background-image:url("../../imagenes/vida3.jpg");
    background-color: aqua;
}

body div:last-child{
    background-image:url("../../imagenes/vida4.jpg");
    background-color: brown;
}

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.

EnigmaticNerd · « **Respuesta #1 en:** 01 de Septiembre 2017, 02:21 »

Corrijan la identificación del ejercicio, es CU01031D. A quien pueda, por favor.

Alex Rodríguez · « **Respuesta #2 en:** 24 de Septiembre 2017, 19:19 »

Hola EnigmaticNerd las imágenes no son visibles porque al haber puesto rutas relativas a tu computador, las demás personas no podemos verlas (para poder verlas tendrían que ser urls de internet)

Como he comentado en un ejercicio anterior, puede ser más recomendable usar identificación por id que con nth-child ya que si se introducen nuevos elementos se perdería la configuración

Saludos

EnigmaticNerd · « **Respuesta #3 en:** 24 de Septiembre 2017, 23:26 »

Lo siento. Recuerdo que ese día el internet estaba muy lento y no podía subir las imágenes a la página.

Acá la hoja de estilos CSS coreggida:

Código: [Seleccionar]

/*Estilos CU01031*/
*{
    margin: auto 20%;
}
div{
    width:400px; 
    height:400px; 
    margin:40px;
    padding:40px;
    border:1px solid blue;
    background-position: center;
}

body div:first-child{
    background-image:url(https://i.imgur.com/qCDOsCR.jpg);
    
    background-color:yellow;
}

body div:nth-child(2){
    background-image:url(https://i.imgur.com/jEd47El.jpg);
    background-color: salmon;
}

body div:nth-child(3){
    background-image:url(https://i.imgur.com/EarnVsy.jpg);
    background-color: aqua;
}

body div:last-child{
    background-image:url(https://i.imgur.com/h4JE4rA.jpg);
    background-color: brown;
}

Gracias por la corrección.

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

Noticias:

Autor Tema: HTML y CSS centrar imagen vertical y horizontal background-position CU01031D (Leído 2869 veces)

EnigmaticNerd

HTML y CSS centrar imagen vertical y horizontal background-position CU01031D

EnigmaticNerd

Re:Ejercicio CU01032D de Aprender a programar:CSS desde cero.Propiedad position css

Alex Rodríguez

Re:HTML y CSS centrar imagen vertical y horizontal background-position CU01031D

EnigmaticNerd

Re:HTML y CSS centrar imagen vertical y horizontal background-position CU01031D

Preguntas y respuestas