28172 sujets

CSS et mise en forme, CSS3

Bootstrap et parallax

Bonsoir,
Je viens vers vous car j'ai un petit souci sur un effet parallax.

J'ai crée un template avec Bootstrap en intégrant du parallax et l'image de fond qui se trouve dans chaque section se répète alors que je souhaiterais qu'elle reste fixe et qu'elle prenne bien toute la largeur de l'écran en largeur (la hauteur ayant de l'image ayant une taille fixe).

Après avoir passé trois bonnes heures à modifier tout ce qui était modifiable en CSS (background size, repeat....), je n'ai pas résolu le problème.
Si quelqu'un a une idée, je suis vraiment preneur car là je galère pas mal et je dois finaliser la page web au plus tard demain !
Est-ce que cela vient du code Jquery ou de la css ?

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

Merci d'avance pour votre aide,
Gilles
Merci pour ta réponse.
C'est la première chose que j'avais essayé mais quand je le met en "no-repeat", l'image disparait
Bonjour,

Je galère toujours, en plus je me suis aperçu que l'image se décalait dès le déclenchement du scroll.
Une idée ?
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 - 11:40)
Gilles_73 a écrit :
Merci pour ta réponse.
C'est la première chose que j'avais essayé mais quand je le met en &quot;no-repeat&quot;, l'image disparait

Oui, ça c'est que ton image est mal positionné, tout simplement.

Vas-y étape par étape. Commence par désactivé ton parallax, ça aidera à positionner tes images correctement avant toute chose.

J'ai fait un test rapide sur ton bloc #section_2_a
#section_2_a {
    background: url("../images/picture_2.jpg") no-repeat fixed 0 100%;}

0 = positionnement horizontal
100% = positionnement vertical

Tu peux mettre une valeur plus grand ou négative au besoin. Il faudra que tu positionnement comme ça chacune de tes images.

EDIT: Je pense qu'il va falloir que tu enlève le "fixed", pour un meilleur rendu.
Modifié par juliesunset (27 Nov 2013 - 15:05)
Sujet clos
Aller à