From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/background-attachment/index.html | 133 ++++++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 files/es/web/css/background-attachment/index.html (limited to 'files/es/web/css/background-attachment') diff --git a/files/es/web/css/background-attachment/index.html b/files/es/web/css/background-attachment/index.html new file mode 100644 index 0000000000..0075a07f88 --- /dev/null +++ b/files/es/web/css/background-attachment/index.html @@ -0,0 +1,133 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS +translation_of: Web/CSS/background-attachment +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad CSS background-attachment determina si la posición de la imagen de fondo será fija dentro de la pantalla o se desplazará con su bloque contenedor.

+ + + +

Sintaxis

+ +
background-attachment: scroll | fixed | inherit
+
+ +

Valores

+ +
+
scroll 
+
Si scroll es especificado, la imagen de fondo se moverá dentro de la pantalla junto al bloque que la contiene.
+
fixed 
+
Si fixed es especificado, la imagen de fondo estará fija en la pantalla y no se moverá con el bloque contenedor.
+
+ +

Ejemplos

+ +

Ejemplo simple

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

Result

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

Soporta múltiples imagenes de fondo

+ +

Esta propiedad soporta multiples imágenes de fondo. Puedes especificar un <attachment> diferente por cada imagen de fondo, separado por comas. Cada imagen es asociada con el correspondiente valor de <attachment>, especificado desde el primero hasta el último.

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

Resultado

+ +

{{EmbedLiveSample("Multiple_background_image_support")}}

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

-- cgit v1.2.3-54-g00ecf