Bonjour,

Je suis nouveau sur ce forum (et nouveau dev). 

J'aurai aimé avoir votre aide afin de comprendre cette propriété :

background-size: 100% calc(100% - 100vh);

Pour mieux expliquer je fais actuellement le responsive d'un site web pour strasbourg (quand même un gros truc, il y'a 8000 personnes+ qui bossent ici chaque jour)

J'ai réussi à faire tous les effets désirés. C'est uniquement un problème de compréhension 

Le lien de la source : 

https://css-tricks.com/books/greatest-css-tricks/scroll-indicator/

Alors je comprends :

background-size: (pas besoin d'explication)

calc(100% - 100vh); (on prend 100% - 100view height)

Mon problème est vraiment ici : 

100% calc(100% - 100vh);

Pourquoi mettre 100% avant le calc ? c'est très étrange non ?

Je vois bien que le résultat sans le 100% avant le calc n'est pas le même

Si vous pouviez éclairer ma lanterne je vous en serai très reconnaissant 

merci 

Bonjour,

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

https://stackoverflow.com/questions/24224063/how-to-set-background-size-to-cover-plus-a-little-more-in-css

Et il y a d'autres explications disponibles.

A+

-
Edité par monkey3d 23 septembre 2022 à 13:11:39

merci pour votre réponse

Mais les personnes dans la documentation parlent uniquement de calc(x - y)

personne ne parle de : z calc(x-y)

-
Edité par MaxWallis 23 septembre 2022 à 13:52:05

Bonjour,

Regarde la doc de la propriété background-size https://developer.mozilla.org/fr/docs/Web/CSS/background-size :

La propriété background-size peut être définie de différentes façons :

- Avec l'un des mots-clés contain ou cover

- Avec une seule valeur qui indique la largeur de l'image (la hauteur vaut alors auto par défaut)

- Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type <length>) ou un pourcentage (type <percentage>) ou encore auto.

Le post stackoverflow en parle ...

A+

Je viens de comprendre, je suis vraiment bête

il y'a 2 valeurs et pas une seule dans la propriété background-size 

Merci pour vos réponses !