CSS | propiedad de fondo adjunto

Posted on by Rudeus Greyrat

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 permanezca fijo. Se puede aplicar a todos los elementos HTML.

Sintaxis:

background-attachment: scroll|fixed|local|initial|inherit;

Valor por defecto de la propiedad:
scroll: Establece que la imagen de fondo quede fija en su posición con respecto al elemento contenedor y se desplace con la página. Es el valor predeterminado.

  • Sintaxis: 
    background-attachment: scroll;
  • Ejemplo:

    html

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                background-attachment property
            </title>
              
            <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>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>
        <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>
        <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:

fixed: esta propiedad se utiliza para establecer la imagen de fondo fija en su posición con respecto a la ventana gráfica.

  • Sintaxis: 
    background-attachment: fixed;
  • Ejemplo:

    html

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                background-attachment property
            </title>
              
            <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>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>
             <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>
             <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:

local: esta propiedad se usa para configurar la imagen de fondo para que se desplace junto con el contenido de su elemento contenedor en lugar de la página.

  • Sintaxis: 
    background-attachment: local;
  • Ejemplo:

    html

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                background-attachment property
            </title>
              
            <style>
                #example {
                    background-image: 
    url("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    background-attachment: local;
                }
            </style>
        </head>
          
        <body style = "text-align:center">
            <h1>GeeksforGeeks</h1>
            <h2> background-attachment: local;</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>
             <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>
             <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:

initial: se utiliza para establecer la propiedad de archivo adjunto de fondo en su valor predeterminado.

  • Sintaxis: 
    background-attachment: initial;
  • Ejemplo:

    html

    <!DOCTYPE html>
    <html>
        <head>
            <title>
                background-attachment property
            </title>
              
            <style>
                #example {
                    background-image: 
    url("https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    background-attachment: initial;
                }
            </style>
        </head>
          
        <body style = "text-align:center">
            <h1>GeeksforGeeks</h1>
            <h2> background-attachment: initial;</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>
             <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>
             <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:

heredar: Se utiliza para establecer la propiedad de su elemento padre.

Navegadores admitidos: los navegadores admitidos por la propiedad background-attachment se enumeran a continuación:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Ópera 3.5
  • Safari 1.0

Publicación traducida automáticamente

Artículo escrito por Archana choudhary y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *