En este artículo, discutiremos la propiedad que se utiliza para controlar el desplazamiento de una imagen en segundo plano. La propiedad background-attachment en CSS se usa para especificar el tipo de archivo adjunto de la imagen de fondo con respecto a su contenedor. Se puede configurar para que se desplace o hacer que permanezca fijo. Se puede aplicar a todos los elementos HTML .
Sintaxis:
background-attachment: scroll|fixed|local|initial|inherit;
Ejemplo 1: El siguiente ejemplo demuestra el valor de «desplazamiento» para la propiedad de archivo adjunto de fondo de CSS. La imagen adjunta de fondo también se desplaza.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#example {
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2> background-attachment: scroll;</h2><br><br>
<div id="example">
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon,
Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to
be asked in the interviews & make your
upcoming placement season efficient and
successful.
</p>
<br>
<p>
This course is especially designed for the
Java apprentices who want to hone their
skills in Java for Coding Interviews and
Competitive Programming. No matter if you
are a school student or college student,
if you have the zeal of programming, this
is the right time to start.
</p>
<br>
<br>
<br>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon,
Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to
be asked in the interviews & make your
upcoming placement season efficient and
successful
</p>
<br>
<br>
<br>
<p>
This course is especially designed for the
Java apprentices who want to hone their
skills in Java for Coding Interviews and
Competitive Programming. No matter if you
are a school student or college student,
if you have the zeal of programming, this
is the right time to start.
</p>
<br>
<br>
<br>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon,
Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to
be asked in the interviews & make your
upcoming placement season efficient and
successful
</p>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el valor «fijo» para la propiedad de archivo adjunto de fondo de CSS. La imagen adjunta de fondo se fija mientras se desplaza el contenido.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#example {
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2> background-attachment: fixed;</h2><br><br>
<div id="example">
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon,
Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to
be asked in the interviews & make your
upcoming placement season efficient and
successful.
</p>
<br>
<p>
This course is especially designed for the
Java apprentices who want to hone their
skills in Java for Coding Interviews and
Competitive Programming. No matter if you
are a school student or college student,
if you have the zeal of programming, this
is the right time to start.
</p>
<br>
<br>
<br>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon,
Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to
be asked in the interviews & make your
upcoming placement season efficient and
successful
</p>
<br>
<br>
<br>
<p>
This course is especially designed for the
Java apprentices who want to hone their
skills in Java for Coding Interviews and
Competitive Programming. No matter if you
are a school student or college student,
if you have the zeal of programming, this
is the right time to start.
</p>
<br>
<br>
<br>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon,
Adobe etc with a free online placement
preparation course. The course focuses on
various MCQ's & Coding question likely to
be asked in the interviews & make your
upcoming placement season efficient and
successful
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sravankumar8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA