Bonjour à tous,

Je travaille actuellement sur l'intégration d'un template PSD et plusieurs sections comportent des images comme background. Un en particulier nécessite un background avec des images qui se collent au bas de ce background/de la fenêtre. 

Sur mon template ( http://labencarton.com/ocr/maquette/index.html#designDevices ) les images semblent collées en bas de la fenêtre (l'iPad et l'iPhone) sur tous les navigateurs. Mais si le fond rétrécit, les images ne suivent pas. J'ai constaté ce problème lorsque j'utilise les outils de développement : quand la console apparaît le fond se rétracte (est-ce normal ? Si oui, peut-on faire quelque chose pour que ce ne soit pas le cas ?).

Pour le moment, je n'ai fait que l'intégration pour les écrans d'ordinateurs fixes.

Savez-vous s'il est possible de fixer des images à un background pour que celles-ci le suivent si jamais il n'a plus la même hauteur ? 

Merci pour votre aide !

Salut Nathaleak,

Pourrait on avoir ton code pour les images ?

Comment veux tu que tes images répondent quand tu diminues la taille de ta fenêtre ?

2 lignes 4 colonnes ?

ou plutôt 4 lignes 2 colonnes ?

Tu peux tout simplement mettre la taille de tes images en % dans ton css ce qui va faire suivre la taille de tes images peu importe la taille de l'écran

Panam

Voici le code source pour cette section avec les images :

Code mis à jour en bas !

J'aimerais que les images suivent le bord de l'image du fond (et donc du bord de la fenêtre). Pour ce qui est de la taille, j'imagine que le % sera le mieux.

-
Edité par antazricom 21 juillet 2017 à 14:29:01

Un petit up !

J'ai retravaillé le CSS pour coller avec "bottom" et "vertical-align". les images s'alignent bien en bas de la <section> sur Opera et Chrome mais il y a toujours un espace sur Safari et Firefox. 

L'alignement semble se faire grâce aux "padding" sur les différents éléments. Y a-t-il un moyen "d'automatiser" sans avoir à le faire à la main au pixel ?

Merci d'avance pour votre aide !

HTML : 

    <!-- Section 4 UNIQUE DESIGN -->
    <section id="designDevices">

      <h2><span class="scriptTitle">For all devices</span><br />Unique design</h2>

      <hr class="separTitleSection" />

      <div class="row justify-content-center">

        <div class="col-md-4">

          <div id="designIpad">

            <img src="./img/ipad.png" alt="Template on iPad" title="Template on iPad" />

          </div>

          <div id="designIphone">

            <img src="./img/iphone.png" alt="Template on iPhone" title="Template on iPhone" />

          </div>

        </div>

      </div>

    </section>

CSS :

/* SECTION 4 : UNIQUE DESIGN */

#designDevices {
  background:url('./img/skills-background.jpg') center center no-repeat;
  width:100%;
  height:100%;
  padding:30px 0 0 0;
  margin-bottom:80px;
}

#designIpad {
  position: relative;
  margin:0 auto;
  overflow: hidden;
  width:350px;
  height:450px;
  top:74px;
  left:-50px;
  vertical-align: bottom;
}

#designIpad img {
  position: absolute;
  width:350px;
  height:522px;
  top:30px;
}

#designIphone {
  position: relative;
  top:-250px;
  left:250px;
  width:220px;
  height:382px;
}

#designIphone img {
  position:absolute;
  width:220px;
  height:382px;
}

-
Edité par antazricom 21 juillet 2017 à 14:30:13