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
Mon code Css
Mon code Jquery
Modifié par Gilles_73 (27 Nov 2013 - 14:36)
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)