11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'avais mis ce sujet dans les CSS mais je crois que mon problème vient du script jquery.
Pour résumé, j'a intégré un effet parallax récupéré sur le web dans mon template bootstrap.
Et j'ai un problème avec l'image du fond de ma section qui se répète alors que je souhaiterais qu'elle soit fixe.

Sachant q'un background no repeat ne fonctionne pas.


Merci d'avance pour votre aide

http://www.gillesnolorgues.com/bootstrap/index.html

SI quelqu'un a une idée, je suis vraiment preneur !

Ci-dessous le code correspondant à une section avec l'image en background

Mon code Html
 
<section id="section_1_a" data-speed="4" data-type="background">
<div class="container">
<div class="row">
 <h1>Turn deeper physician engagement into higher performing brands</h1>
</div>
 </div>
</section>

]


Mon code Css

#section_1_a {
    background: url(../images/picture_2.jpg) 50% 0 fixed;
            background-position:center;
            height: auto; 
            margin: 0 auto;
            width: 100%;
            position: relative;
            padding-top:100px;
            padding-bottom:100px;
             
        }


Mon code Jquery

$(document).ready(function(){
   // cache the window object
   $window = $(window);
  
   $('section[data-type="background"]').each(function(){
     // declare the variable to affect the defined data-type
     var $scroll = $(this);
                      
      $(window).scroll(function() {
        // HTML5 proves useful for helping with creating JS functions!
        // also, negative value because we're scrolling upwards                           
        var yPos = -($window.scrollTop() / $scroll.data('speed'));
          
        // background position
        var coords = '50% '+ yPos + 'px';
  
        // move the background
        $scroll.css({ backgroundPosition: coords });  
      }); // end window scroll
   });  // end section function
}); // close out script
 
/* Create HTML5 element for IE */
document.createElement("section");

Modifié par Gilles_73 (27 Nov 2013 - 14:36)
Hello,

Sur ton lien, dans le fichier css tu as spécifié que tes images sont en repeat.
#section_1_a {
    background: url("../images/picture_1.jpg") [b]repeat [/b] fixed 100% 0 rgba(0, 0, 0, 0);
    height: auto;
    margin: 0 auto;
    padding-bottom: 100px;
    padding-top: 100px;
    position: relative;
    width: 100%;
}