Background image avec une partie de l'image

Background image avec une partie de l'image d'origine

3 décembre 2021 à 16:38:26

Bonjour,

Je voudrais réaliser une div avec un background image qui serait qu'une partie d'une image. J'utilise déjà l'image complète comme fond du site en cover de ma page. Mais je voudrais ajouter une div en bas de page qui fix (dimension : w100% et H 60px) qui aurait comment fond la partie de l'image qui correspond au dimension ci-avant.

Le but étant au final d'avoir trois div :

</div>

La div blur qui est fixée en bas avec une hauteur de 60, qui floute l'image de la div fond avec un z-index supérieur. Puis la div menu, identique à la blur mais sans image (et sans effet blur) pour que le texte de mon menu soit pas flouté.

Les div "fond" et "menu" sont OK mais je n'arrive pas à faire la div blur.

Merci d'avoir lu mon message et si vous avez une solution, je suis preneur. Je pense qu'il faut jouer avec le positionnement et la taille mais je n'y arrive pas.

-
Edité par RaphaëlNicolle 3 décembre 2021 à 16:39:47

noopy360

4 décembre 2021 à 1:29:11

Salut, alors je pense que tout le monde est oki pour t'aider mais :

- Pense à utiliser le bouton </> du forum pour partager ton code

- Partage nous aussi le CSS sinon dur de t'aider, si tu le peut utilise "codepen" ou autre

- Je te déconseil d'utiliser les "id" préfère les "class" sauf si tu utilise du JS ou des "encres"

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen