Cómo hacer que una imagen estática cuando el desplazamiento

Así que tengo un borde en la parte superior de la página y quiero permanecer en el mismo lugar cuando me desplazarse hacia abajo. He intentado poner la posición de: fijo en muchos lugares diferentes y todavía no puede hacer que funcione. También, me gustaría que el contenido de otros para desplazarse detrás de esta imagen, si es posible. Este es mi código:

    <div style='
      background-image: url(http://i111.photobucket.com/albums/n144/baby_painting/bowlace2.gif);
      background-repeat: repeat-x;'>
         <img src="http://i111.photobucket.com/albums/n144/baby_painting/bowlace2.gif">
    </div>

es para la página nikkidarlinggg.tumblr.com
lo siento Si no estoy escribiendo esto correctamente, nunca he utilizado este sitio antes.

InformationsquelleAutor Nicole Reid | 2013-08-25

4 Kommentare

  1. 0

    Agregar estos estilos a la etiqueta div:

    position: fixed;
    width: 100%;
    z-index: 10;
    • Gracias! También, ¿cómo puedo crear un espacio debajo de la frontera, para no tocar las imágenes cuando es la primera vez que visita la página? Sé que se superponen después de que yo comience a desplazarse. Podría usar algo como: padding-bottom:10px; ?
    • Para agregar algunos espaciado por encima de las imágenes, añadir el siguiente estilo para el div con id=»jaula»: padding-top: 55px
    • Yo realmente no sé mucho acerca de código, donde sería exactamente la que me ponga? Y la barra lateral con mi texto bajar así? Porque me gustaría que fuera más bajo también.
    • Usted podría reemplazar <div id=»jaula»>, con <div id=»jaula» style=»padding-top:55px;»>
    • Me lo imaginé. Muchas gracias
  2. 1

    Que esto va a resolver su problema :

       <div  class='fixed' ></div>
       <div class='content'>Your content here </div>

    y fija clase :

    .fixed{
     position:fixed;
     top:0;
     z-index: 1;
     width:100%;
     height:100%;
     background-image:url(http://i111.photobucket.com/albums/n144/baby_painting/bowlace2.gif);background-     
     repeat: repeat-x; 
    }
    .content{margin-top:57px;}

    el uso de css dentro de css dentro de tu código html :

       <div style="position:fixed; top:0; z-index: 1; width:100%;height:100%;background-image:url(http://i111.photobucket.com/albums/n144/baby_painting/bowlace2.gif);background-repeat: repeat-x;" >
      </div>
      <div style='margin-top:57px;'>Your content here </div>

    DEMO AQUÍ : http://jsfiddle.net/Nsuj7/

  3. 0
    <div style="background-image: url(http://i111.photobucket.com/albums/n144/baby_painting/bowlace2.gif);background-repeat: repeat-x;position:fixed;width:100%;z-index:2;height:57px"></div>

    Trate de esto, el uso de z-index 2 o por encima de cualquier valor.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea