18041 sujets

Questions générales et questions de débutants

[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)
Modérateur
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)
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 Smiley langue ))

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)
Modérateur
myself a écrit :
Ton Fiddle ne reprend pas la div dont j’ai besoin. J’ai rajouté le code html : https://jsfiddle.net/5s39kyfu/

Oui ca s'appelle un exemple Smiley sweatdrop

Dans ce que tu as rajouté tu as oublié le point pur faire le sélecteur de class et un height 100% si tu veux que ta div prenne toute la hauteur (sauf si c'est déjà le cas chez toi).
https://jsfiddle.net/undless/ez4kxoja/

myself a écrit :
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

Vu qu'on a pas ton code on peut pas savoir mais normalement le code au dessus fonctionne...

si c'est juste pour faire un dégradé, pourquoi tu n'utilise pas un gradient ?
https://cssgradient.io/
Meilleure solution
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 Smiley smile
Modifié par myself (22 Mar 2022 - 16:41)
Sujet clos
Aller à