En este artículo, veremos qué propiedad se puede utilizar para controlar el desplazamiento de la imagen usando CSS. Para realizar esta tarea, podemos implementar la propiedad background-attachment que especifica el tipo de archivo adjunto de la imagen de fondo con respecto a su contenedor. Se puede aplicar a todos los elementos HTML. Podemos especificar un valor diferente de la propiedad background-attachment para cada imagen de fondo, separados por comas. El valor predeterminado del desplazamiento de imágenes es scroll .
Sintaxis:
selector {
background-image: url('GFG.jpg');
background-attachment: fixed;
}
Valores de atributos:
- scroll: Evita que el elemento se desplace con el contenido, pero sí con la página.
- solucionado: la imagen de fondo no se mueve con el contenido del elemento, incluso el elemento está configurado como desplazamiento.
- local: Configura la imagen de fondo para que se desplace con el contenido del elemento.
- initial: establece la propiedad CSS en su valor predeterminado.
- heredar: Establece elementos para heredar de su elemento padre.
Ejemplo 1: este ejemplo implementa la propiedad CSS background-attachment, donde el texto se desplaza y mantiene la imagen fija.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
/* Fixing Background image */
background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220714194336/gfg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
/* Arranging the image */
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: justify;
}
h1,
h3 {
color: green;
text-align: center;
}
p {
color: aliceblue;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Background-attachment Property</h3>
<p>
A Computer Science portal for geeks. It contains well
written, well thought and well explained computer
science and programming articles Learn Data Structures
and Algorithms Online at Your Own Pace with GeeksforGeeks
DSA Course. Master DSA basics and practice Data Structure
interview questions with GFG DSA self paced. The
DSA online course is designed to improve your
problem-solving and coding skills by enhancing
your understanding of Data Structures & Algorithms.
Web Technology refers to the various tools and techniques
that are utilized in the process of communication
between different types of devices over the internet. A web
browser is used to access web pages. Web browsers can be
defined as programs that display text, data, pictures,
animation, and video on the Internet. Hyperlinked
resources on the World Wide Web can be accessed
using software interfaces provided by Web browsers.
</p>
<p>
A Computer Science portal for geeks. It contains well
written, well thought and well explained computer
science and programming articles Learn Data Structures
and Algorithms Online at Your Own Pace with GeeksforGeeks
DSA Course. Master DSA basics and practice Data Structure
interview questions with GFG DSA self paced. The
DSA online course is designed to improve your
problem-solving and coding skills by enhancing
your understanding of Data Structures & Algorithms.
Web Technology refers to the various tools and techniques
that are utilized in the process of communication
between different types of devices over the internet. A web
browser is used to access web pages. Web browsers can be
defined as programs that display text, data, pictures,
animation, and video on the Internet. Hyperlinked
resources on the World Wide Web can be accessed
using software interfaces provided by Web browsers.
</p>
<p>
A Computer Science portal for geeks. It contains well
written, well thought and well explained computer
science and programming articles Learn Data Structures
and Algorithms Online at Your Own Pace with GeeksforGeeks
DSA Course. Master DSA basics and practice Data Structure
interview questions with GFG DSA self paced. The
DSA online course is designed to improve your
problem-solving and coding skills by enhancing
your understanding of Data Structures & Algorithms.
Web Technology refers to the various tools and techniques
that are utilized in the process of communication
between different types of devices over the internet. A web
browser is used to access web pages. Web browsers can be
defined as programs that display text, data, pictures,
animation, and video on the Internet. Hyperlinked
resources on the World Wide Web can be accessed
using software interfaces provided by Web browsers.
</p>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo describe la propiedad background-attachment en CSS especificando el desplazamiento del texto y haciendo que la imagen se desplace con él.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
/* Fixing Background image */
background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220714194336/gfg.jpg');
background-repeat: no-repeat;
background-attachment: scroll;
/* Arranging the image */
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: justify;
}
h1,
h3 {
color: green;
text-align: center;
}
p {
color: aliceblue;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Background-attachment Property</h3>
<p>
A Computer Science portal for geeks. It contains well
written, well thought and well explained computer
science and programming articles Learn Data Structures
and Algorithms Online at Your Own Pace with GeeksforGeeks
DSA Course. Master DSA basics and practice Data Structure
interview questions with GFG DSA self paced. The
DSA online course is designed to improve your
problem-solving and coding skills by enhancing
your understanding of Data Structures & Algorithms.
Web Technology refers to the various tools and techniques
that are utilized in the process of communication
between different types of devices over the internet. A web
browser is used to access web pages. Web browsers can be
defined as programs that display text, data, pictures,
animation, and video on the Internet. Hyperlinked
resources on the World Wide Web can be accessed
using software interfaces provided by Web browsers.
</p>
<p>
A Computer Science portal for geeks. It contains well
written, well thought and well explained computer
science and programming articles Learn Data Structures
and Algorithms Online at Your Own Pace with GeeksforGeeks
DSA Course. Master DSA basics and practice Data Structure
interview questions with GFG DSA self paced. The
DSA online course is designed to improve your
problem-solving and coding skills by enhancing
your understanding of Data Structures & Algorithms.
Web Technology refers to the various tools and techniques
that are utilized in the process of communication
between different types of devices over the internet. A web
browser is used to access web pages. Web browsers can be
defined as programs that display text, data, pictures,
animation, and video on the Internet. Hyperlinked
resources on the World Wide Web can be accessed
using software interfaces provided by Web browsers.
</p>
<p>
A Computer Science portal for geeks. It contains well
written, well thought and well explained computer
science and programming articles Learn Data Structures
and Algorithms Online at Your Own Pace with GeeksforGeeks
DSA Course. Master DSA basics and practice Data Structure
interview questions with GFG DSA self paced. The
DSA online course is designed to improve your
problem-solving and coding skills by enhancing
your understanding of Data Structures & Algorithms.
Web Technology refers to the various tools and techniques
that are utilized in the process of communication
between different types of devices over the internet. A web
browser is used to access web pages. Web browsers can be
defined as programs that display text, data, pictures,
animation, and video on the Internet. Hyperlinked
resources on the World Wide Web can be accessed
using software interfaces provided by Web browsers.
</p>
</body>
</html>
Salida :
Publicación traducida automáticamente
Artículo escrito por ayushcoding100 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA