« anterior próximo »
Páginas: [1]

Autor Tema: CSS - Duda sobre background-attachment local y scroll no funciona da problemas  (Leído 3531 veces)

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
CSS - Duda sobre background-attachment local y scroll no funciona da problemas
« en: 12 de Diciembre 2016, 16:33 »
Hola xicos,
es fácil usa las distintas características de background con CSS. Pero me surge un problema, defino un div en que es un cuadrado dentro de la página principal y este cuadrado no me deja definir background-attachment, bueno no me deja o hago algo incorrecto.
Adjunto algo parecido de código para que podais ver lo que quiero decir. Probar los distintos valores de background-attachment y vereis como no responde a lo que se le pide.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #cuadro{
        border:solid thin black;
        display:block;
        position: absolute;
        width:400px;
        height:400px;
        top:20%;
        left:30%;
        overflow:scroll;
        background-image:url('http://lorempixel.com/200/200');
        background-attachment:local;
        background-repeat:no-repeat;
    }   
</style>
</head>
<body>
    <div id="cuadro">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iste, nostrum corporis suscipit numquam perspiciatis explicabo nemo provident consequuntur, enim accusamus nobis perferendis. Cumque laboriosam incidunt tempora tenetur, atque laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repudiandae vero facilis sequi maxime, laudantium optio. Sint exercitationem quos ex in, quaerat laudantium, mollitia labore, nisi voluptatum, suscipit ducimus fuga.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus delectus iusto, perferendis unde laboriosam, at tempora reprehenderit ullam tempore qui reiciendis hic excepturi, repellat placeat ea quos blanditiis! Pariatur, ipsa.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iste, nostrum corporis suscipit numquam perspiciatis explicabo nemo provident consequuntur, enim accusamus nobis perferendis. Cumque laboriosam incidunt tempora tenetur, atque laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repudiandae vero facilis sequi maxime, laudantium optio. Sint exercitationem quos ex in, quaerat laudantium, mollitia labore, nisi voluptatum, suscipit ducimus fuga.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus delectus iusto, perferendis unde laboriosam, at tempora reprehenderit ullam tempore qui reiciendis hic excepturi, repellat placeat ea quos blanditiis! Pariatur, ipsa.</p>
    </div>
</body>
</html>Saludos y gracias antemano.
« Última modificación: 23 de Diciembre 2016, 20:40 por Ogramar »
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS - Duda sobre background-attachment
« Respuesta #1 en: 12 de Diciembre 2016, 17:10 »
Hola bermartinv.

¿Cual es el problema?

Está pasando lo que tiene que pasar, que el fondo se desplaza junto con el contenido del elemento.

Saludos. ;D
En línea

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:CSS - Duda sobre background-attachment
« Respuesta #2 en: 12 de Diciembre 2016, 17:14 »
Si, pero si lo cambias por 'scroll' sigue haciendo lo mismo. Como he probado tanto al final dejé el que no quería dejar. ;D
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS - Duda sobre background-attachment
« Respuesta #3 en: 12 de Diciembre 2016, 17:32 »
No. ;)

Con local, la imagen de fondo se desplaza junto con el contenido y con scroll se queda fija y solo se desplaza el contenido, o por lo menos eso es lo que yo veo.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #cuadro{
        border:solid thin black;
        display:block;
        position: absolute;
        width:400px;
        height:250px;
        overflow:scroll;
        background-image:url('http://lorempixel.com/200/200');
        background-attachment:local;
        background-repeat:no-repeat;
    } 
    #cuadro1{
        border:solid thin black;
        display:block;
        position: absolute;
        width:400px;
        height:250px;
        top:400px;
        overflow:scroll;
        background-image:url('http://lorempixel.com/200/200');
        background-attachment:scroll;
        background-repeat:no-repeat;
    }   
</style>
</head>
<body>
   
    <div id="cuadro"><h1>local</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iste, nostrum corporis suscipit numquam perspiciatis explicabo nemo provident consequuntur, enim accusamus nobis perferendis. Cumque laboriosam incidunt tempora tenetur, atque laborum.</p><h1>local</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repudiandae vero facilis sequi maxime, laudantium optio. Sint exercitationem quos ex in, quaerat laudantium, mollitia labore, nisi voluptatum, suscipit ducimus fuga.</p><h1>local</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus delectus iusto, perferendis unde laboriosam, at tempora reprehenderit ullam tempore qui reiciendis hic excepturi, repellat placeat ea quos blanditiis! Pariatur, ipsa.</p><h1>local</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iste, nostrum corporis suscipit numquam perspiciatis explicabo nemo provident consequuntur, enim accusamus nobis perferendis. Cumque laboriosam incidunt tempora tenetur, atque laborum.</p><h1>local</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repudiandae vero facilis sequi maxime, laudantium optio. Sint exercitationem quos ex in, quaerat laudantium, mollitia labore, nisi voluptatum, suscipit ducimus fuga.</p><h1>local</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus delectus iusto, perferendis unde laboriosam, at tempora reprehenderit ullam tempore qui reiciendis hic excepturi, repellat placeat ea quos blanditiis! Pariatur, ipsa.</p><h1>local</h1>
    </div>

    <div id="cuadro1"><h1>scroll</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iste, nostrum corporis suscipit numquam perspiciatis explicabo nemo provident consequuntur, enim accusamus nobis perferendis. Cumque laboriosam incidunt tempora tenetur, atque laborum.</p><h1>scroll</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repudiandae vero facilis sequi maxime, laudantium optio. Sint exercitationem quos ex in, quaerat laudantium, mollitia labore, nisi voluptatum, suscipit ducimus fuga.</p><h1>scroll</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus delectus iusto, perferendis unde laboriosam, at tempora reprehenderit ullam tempore qui reiciendis hic excepturi, repellat placeat ea quos blanditiis! Pariatur, ipsa.</p><h1>scroll</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iste, nostrum corporis suscipit numquam perspiciatis explicabo nemo provident consequuntur, enim accusamus nobis perferendis. Cumque laboriosam incidunt tempora tenetur, atque laborum.</p><h1>scroll</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repudiandae vero facilis sequi maxime, laudantium optio. Sint exercitationem quos ex in, quaerat laudantium, mollitia labore, nisi voluptatum, suscipit ducimus fuga.</p><h1>scroll</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus delectus iusto, perferendis unde laboriosam, at tempora reprehenderit ullam tempore qui reiciendis hic excepturi, repellat placeat ea quos blanditiis! Pariatur, ipsa.</p><h1>scroll</h1>
    </div>
</body>
</html>
 ;D
« Última modificación: 12 de Diciembre 2016, 17:34 por pedro,, »
En línea

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:CSS - Duda sobre background-attachment
« Respuesta #4 en: 12 de Diciembre 2016, 23:03 »
Hola pedro,, si yo entiendo lo que tú me quieres decir.
Pero yo copio y pego tu código en mi editor(brackets), lo guardo y ejecuto el código y el #cuadro hace local pero #cuadro1 me hace fixed cuando la característica que hay es scroll.
No lo entiendo.  :( :o ::) :-[ :-\ :'(
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS - Duda sobre background-attachment
« Respuesta #5 en: 12 de Diciembre 2016, 23:22 »
Prueba este código. La diferencia entre scroll y fixed la apreciaras cuando hagas scroll sobre la ventana principal y no dentro de ninguno de los elementos que tienen la propiedad "background-attachment".

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #cuadro{
        border:solid thin black;
        display:block;
        position: absolute;
        width:400px;
        height:250px;
        overflow:scroll;
        background-image:url('http://lorempixel.com/200/200');
        background-attachment:fixed;
        background-repeat:no-repeat;
    } 
    #cuadro1{
        border:solid thin black;
        display:block;
        position: absolute;
        width:400px;
        height:250px;
        top:275px;
        overflow:scroll;
        background-image:url('http://lorempixel.com/200/200');
        background-attachment:scroll;
        background-repeat:no-repeat;
    }
    #cuadro2{
        border:solid thin black;
        display:block;
        position: absolute;
        width:400px;
        height:500px;
        top:550px;
        overflow:scroll;
        background-image:url('http://lorempixel.com/200/200');
        background-attachment:local;
        background-repeat:no-repeat;
    }   
</style>
</head>
<body>
   
    <div id="cuadro"><h2>background-attachment:fixed</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iste, nostrum corporis suscipit numquam perspiciatis explicabo nemo provident consequuntur, enim accusamus nobis perferendis. Cumque laboriosam incidunt tempora tenetur, atque laborum.</p><h1>fixed</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repudiandae vero facilis sequi maxime, laudantium optio. Sint exercitationem quos ex in, quaerat laudantium, mollitia labore, nisi voluptatum, suscipit ducimus fuga.</p><h1>fixed</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus delectus iusto, perferendis unde laboriosam, at tempora reprehenderit ullam tempore qui reiciendis hic excepturi, repellat placeat ea quos blanditiis! Pariatur, ipsa.</p><h1>fixed</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iste, nostrum corporis suscipit numquam perspiciatis explicabo nemo provident consequuntur, enim accusamus nobis perferendis. Cumque laboriosam incidunt tempora tenetur, atque laborum.</p><h1>fixed</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repudiandae vero facilis sequi maxime, laudantium optio. Sint exercitationem quos ex in, quaerat laudantium, mollitia labore, nisi voluptatum, suscipit ducimus fuga.</p><h1>fixed</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus delectus iusto, perferendis unde laboriosam, at tempora reprehenderit ullam tempore qui reiciendis hic excepturi, repellat placeat ea quos blanditiis! Pariatur, ipsa.</p><h1>fixed</h1>
    </div>

    <div id="cuadro1"><h2>background-attachment:scroll</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iste, nostrum corporis suscipit numquam perspiciatis explicabo nemo provident consequuntur, enim accusamus nobis perferendis. Cumque laboriosam incidunt tempora tenetur, atque laborum.</p><h1>scroll</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repudiandae vero facilis sequi maxime, laudantium optio. Sint exercitationem quos ex in, quaerat laudantium, mollitia labore, nisi voluptatum, suscipit ducimus fuga.</p><h1>scroll</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus delectus iusto, perferendis unde laboriosam, at tempora reprehenderit ullam tempore qui reiciendis hic excepturi, repellat placeat ea quos blanditiis! Pariatur, ipsa.</p><h1>scroll</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iste, nostrum corporis suscipit numquam perspiciatis explicabo nemo provident consequuntur, enim accusamus nobis perferendis. Cumque laboriosam incidunt tempora tenetur, atque laborum.</p><h1>scroll</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repudiandae vero facilis sequi maxime, laudantium optio. Sint exercitationem quos ex in, quaerat laudantium, mollitia labore, nisi voluptatum, suscipit ducimus fuga.</p><h1>scroll</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus delectus iusto, perferendis unde laboriosam, at tempora reprehenderit ullam tempore qui reiciendis hic excepturi, repellat placeat ea quos blanditiis! Pariatur, ipsa.</p><h1>scroll</h1>
    </div>
    <div id="cuadro2"><h2>background-attachment:local</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iste, nostrum corporis suscipit numquam perspiciatis explicabo nemo provident consequuntur, enim accusamus nobis perferendis. Cumque laboriosam incidunt tempora tenetur, atque laborum.</p><h1>local</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repudiandae vero facilis sequi maxime, laudantium optio. Sint exercitationem quos ex in, quaerat laudantium, mollitia labore, nisi voluptatum, suscipit ducimus fuga.</p><h1>local</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus delectus iusto, perferendis unde laboriosam, at tempora reprehenderit ullam tempore qui reiciendis hic excepturi, repellat placeat ea quos blanditiis! Pariatur, ipsa.</p><h1>local</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad iste, nostrum corporis suscipit numquam perspiciatis explicabo nemo provident consequuntur, enim accusamus nobis perferendis. Cumque laboriosam incidunt tempora tenetur, atque laborum.</p><h1>local</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repudiandae vero facilis sequi maxime, laudantium optio. Sint exercitationem quos ex in, quaerat laudantium, mollitia labore, nisi voluptatum, suscipit ducimus fuga.</p><h1>local</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus delectus iusto, perferendis unde laboriosam, at tempora reprehenderit ullam tempore qui reiciendis hic excepturi, repellat placeat ea quos blanditiis! Pariatur, ipsa.</p><h1>local</h1>
    </div>
</body>
</html>
Aquí podrás ver la explicación do lo que se consigue con cada parámetro.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
« Última modificación: 12 de Diciembre 2016, 23:28 por pedro,, »
En línea

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:CSS - Duda sobre background-attachment
« Respuesta #6 en: 13 de Diciembre 2016, 12:34 »
Viendole así tiene sentido y por eso me estaba volviendo loco. Lo había pensado pero no lo veía lógico. Creo que es una de las cosas que se deberían cambiar en futuras modificaciones de código CSS.

Muchas gracias pedro,,

SALUDOS
« Última modificación: 23 de Diciembre 2016, 20:39 por Ogramar »
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

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