[Résolu] Image qui prend toute la hauteur (étirable) en background d’u

Salut,

Je tâtonne un peu beaucoup pour arriver au résultat escompté : que le background d’une div soit étiré sur toute sa hauteur.

J’ai cherché sur Google, et je continue, mais si quelqu’un à la solution, je suis preneuse.

Merci.

//edit : mon code pour l’instant :

.fullbckgrd {
  background-image: url(../img/degrade.svg);
  background-position: 0 0, bottom;
  background-repeat: repeat-x;
  /*display: block;*/
  /*width: 100vw;*/
  /*height: 100vh;*/
  /*object-fit: cover;*/
  background-size: cover;
} 

Modifié par myself (22 Mar 2022 - 15:33)

Salut,

Bah c'est ça a deux trois poils de chat.

Juste dans le background-position le "bottom" ne sert a rien vu que tu n'a qu'un seul background et le repeat-x qui ne sert a rien non plus avec le cover. Donc ca se résume à :

.fullbckgrd {
  background-image: url(../img/degrade.svg);
  background-position: 0 0;
  background-size: cover;
} 

Qu'est-ce qui coince ?

Par étiré tu veux dire déformé ou juste étendu en respectant les proportion (comme ce que devrait faire cover ici) ?
Modifié par _laurent (22 Mar 2022 - 15:37)

Salut Laurent,

Non je voudrais que l’image soit déformée, s’il le faut, en hauteur, pour qu’elle occupe toute la div. Et répété en y également, car c’est un fond dégradé.

(et je voudrais que l’image soit « écrasée » en hauteur si la div est moins hauteur que l’image)

Ah ok. Tu connais la largeur de ton image j'imagine donc ca sera juste :

.fullbckgrd {
  background: url(../img/degrade.svg);
  background-size: 150px 100%;
}

https://jsfiddle.net/undless/c5Lo3h46/

pas besoin de repeat (déjà de base) ni de position 0 0 (déjà de base aussi)

Ton Fiddle ne reprend pas la div dont j’ai besoin. J’ai rajouté le code html : https://jsfiddle.net/5s39kyfu/

Sinon, j’ai essayé chez moi et j’ai un bug (d’affichage ?) ou dans le code :
https://i.ibb.co/RPJmPcr/Screenshot-2022-03-22-at-16-15-27.png

(le rendu qu’il devrait y avoir, ça serait un peu comme des slides (qui ne bougent pas ))

Une idée de comment réparer ça ?

//edit : object-fit: cover; marche presque, hormi que l’image ne s’écrase pas en hauteur si le contenu de la slide est moins grand…
Modifié par _laurent (22 Mar 2022 - 16:29)

Mon bug se produit avec l’image en svg sous Firefox et Vivaldi (pas essayé ailleurs).

Le code est identique à celui que tu m’avais donné.

C’est très bizarre que les images répétés ne soient pas jointives.

Mais sinon, en attendant, je vais voir du côté des dégradés CSS.

Merci

Le rendu en CSS est parfait. Merci. Résolu
Modifié par myself (22 Mar 2022 - 16:41)