Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
4
respuestas

No carga la imagen como background en el footer

Buenas noches! Vengo haciendo el ejercicio codo a codo con el tutorial de Christian. Pero no consigo que me cargue la imagen como background cuando estoy haciendo el identificador del footer en el archivo del css. Pensaba que la ruta de acceso del archivo era muy larga, lo acorté y no funcionó tampoco. Estoy usando el sublime text como IDE pero no creo que eso influya, o si??.. HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Productos - Barberia Alura</title>
    <link rel="stylesheet" type="text/css" href="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\reset.css"> 
    <link rel="stylesheet" type="text/css" href="productos.css">
</head>
<body>
    <header>

        <div class="caja">
                <h1><img src="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\logo.png"></h1>

            <nav>
                <ul>
                    <li><a href="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\1742-HTML5-y-CSS3-parte1-aula6\1742-HTML5 e CSS3 parte1-aula6\index.html">home</a></li>
                    <li><a href="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\productos.html">productos</a></li>
                    <li><a href="contacto.html">contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <ul class="productos">
            <li>
                <h2>Cabello</h2>
                <img src="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\cabello.jpg">
                <p class="producto-descripcion">Con tijera o máquina, a gusto del cliente</p>
                <p class="producto-precio">$10.00</p>
            </li>

            <li>
                <h2>Barba</h2>
                <img src="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\barba.jpg">
                <p class="producto-descripcion">Corte y diseño prosional de barba</p>
                <p class="producto-precio">$8.00 </p>            
            </li>

            <li>
                <h2>Cabello + Barba</h2>
                <img src="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\cabello+barba.jpg">
                <p class="producto-descripcion">Paquete completo de cabello y barba</p>
                <p class="producto-precio">$15.00</p>            
            </li>
        </ul>
    </main>

    <footer>

        <img src="C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\logo-blanco.png">
        <p>Copyright - Barberia Alura - 2020</p>

    </footer>

</body>
</html>

CSS

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caja {
    width: 940px;
    position: relative;
    margin: 0 auto;              /*El 0 es margen superior e inferior*/
}                                /*el auto corrige la posicion de los elementos (bordes) sin importar */
                                /*la resolucion de la pantalla, es responsive*/

nav {
    position: absolute;
    top: 110px;
    right: 0px;
}

nav li {
    display: inline;            /*acomoda la lista en horizontal*/
    margin: 0 0 0 15px;            /*acomoda espacio en items de lista,aca es el izquierdo*/
}

nav a {
    text-transform: uppercase;     /*transforma el texto a mayuscula*/
    color: #000000;             /*color de la fuente*/
    font-weight: bold;             /*texto en negrita*/
    font-size: 22px;            /*tamaño fuente*/
    text-decoration: none;        /*saca decoracion de texto*/
}

nav a:hover{                      /*hover: lee el movimiento del raton (y no lleva espacio despues de :)*/
    color: #c78c19;
    text-decoration: underline;    /*subrayado del texto al posicionar el raton*/
}

.productos {
    width: 940px;
    margin: 0 auto;
    padding: 50px;
}


.productos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    /*background-color: #CCCCCC;*/ /*Sirvio para acomodar los logos en cajas*/
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;        /*prop. border:  width style color*/
    /*border-color: #000000;        para armar el contorno de las cajas de los productos
    border-width: 2px;
    border-style: solid;*/
    border-radius: 10px;            /*para el borde redondeado*/
}

.productos li:hover{
    border-color: #c78c19;
}

.productos li:active{                 /*captura el click del raton*/
    border-color: #088c19;
}

.productos h2 {
    font-size: 30px;
    font-weight: bold;
}

.productos h2:hover{
    font-size: 33px;
}

.producto-descripcion{
    font-size: 18px;
}

.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

footer{
    text-align: center;
    background:url(C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\bg.jpg) ;
}
4 respuestas
solución!

Prueba dejar entre comillas, imagino que no lo encuentra por los espacios en blanco entre textos

background:url("C:\Users\matia\Desktop\ONE - Curso Oracle & Alura\HTML5 y CSS3 para paginas web - parte 2\imagenes\bg.jpg") ;

intenta dejándolo entre comillas, y si eso no funciona proba cambiando el nombre de la carpeta para que no quede separada la url y lo tome como si fueran valores diferentes.

asi:

o asi:

background:url(C:\Users\matia\Desktop\ONE-Curso-Oracle-&-Alura\HTML5-y-CSS3-para-paginas-web-parte-2\imagenes\bg.jpg);

También puedes probar este código es el que ami me funciono, lo encontré en un post con el mismo problema:

footer{

text-align: center;
background-image:url(../imagenes/bg.jpg);

}

Muchas gracias muchachos! Lo único que tuve que cambiar fue la barra " \ " por esta otra " / ". Igualmente sus ideas me vienen bien para algún que otro "evento" me toque en el futuro. Saludos!