28172 sujets

CSS et mise en forme, CSS3

Bonjour a tous,

Actuellement je travail sur un projet sous bootstrap. Mon problème est le suivant :
J'ai une image que je voudrais qu'elle tienne toute la largeur de l’écran, le code est le suivant :

 <div class="slider"><!-- div pour background bleu -->

      <div class="container marketing jetstrap-highlighted">

        <!-- debut slider en span 12 avec un table 2 cellule dedans -->
        <div class="row-fluid" id="slider">
          <div class="span12" style="display: block;">
            <img class="img-circle" data-src="holder.js/140x140">

            <table id="table-slider">
              <tbody>
                <tr>
                  <td>
                    <h3><b>TITRE DU SLIDER</b></h3>
                    <br>Phrase accroche slider ....................................................
                    <br>...........................................................................
                    <br>.............................................................!
                  </td>
                  <td>
                    <br>
                    <img src="https://s3.amazonaws.com/media.jetstrap.com/wXNuH8hNR2SABb2fg9Mg_icn-slider-depenserpoint.png">
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
        </div>
      </div>
    </div><!-- fin slider -->


Le code css qui va avec est :

.slider{
  background-color: #09b2ba;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  /*paramtrer les valeurs et les attributs pour tenir
  compte des navigateurs les plus utilisés */
  -webkit-background-size: 40px 40px;/*kit web */
     -moz-background-size: 40px 40px;/*pour mozilla firefox*/
       -o-background-size: 40px 40px;
          background-size: 40px 40px;/*pour le degradé*/

}


Avec le code que j'ai, l'image en background ne tiens pas sur toute la largeur, voilà.

Je vous remercie.
Modérateur
Salut,
Je ne suis pas sur d'avoir compris...
C'est les stries qui doivent arrivées de bord à bord ? Si oui, as-tu ajouté un margin: 0 sur ton body ?

Pardon, j'ai pas vu que tu utilisais Bootstrap (qui applique un margin 0 sur body), donc je n'ai pas compris Smiley biggrin
Modifié par Yordi (22 May 2013 - 12:16)
Au fait l'image qui est crée est un background en dégradé et le problème est qu'il tient uniquement dans le slider donc ceci dis il ne prend pas toute la largeur de l'écran et du coup moi je voudrais qu'elle tienne toute la largeur de l'écran. Voilà

Merci.