Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: bermartinv 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.
<!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.
-
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
-
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
-
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.
<!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
-
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 ::) :-[ :-\ :'(
-
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".
<!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
-
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