J'ai tout simplement suivi un TUTO sur YouTube pour crée un site Web Responsive pour m'entrainer au codage, mais le problème étant que mon image ne s'affiche sur le filtre. J'ai tous essayé mais rien n'y fait, mon dernière éspoire est ce forum alors je compte sur vous !

Voici le code :

.header{
    height: 450px;
    width: 100%;
    background: rgb(62, 57, 107 );
    position: relative;
}

.header__texture {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;left: 0;
    background-image: url(img/face.jpg) center no-repeat;
    background-size: cover;
    z-index: 1;
    opacity: 1;
}

.header__mask {
    position: absolute;
    bottom: 0;
    background: 0 0;
    height: 42px;
    width: 100%;
    z-index: 1;
}

 et, le morceau de code en html :

-
Edité par WeasusFR 17 novembre 2019 à 11:51:15

Bonjour,

que nous dit l'inspecteur web ? image manquante ? autre ? quelles dimensions donne-t-il pour la div contenant l'image ?

attention, les 100% sont très souvent à bannir ... en particulier width:100%, complètement inutile

et à quoi sert la div header_texture ? mets le background sur header, c'est suffisant et vire header_texture

et header__mask ne semble pas vraiment utile,

simplifie tout !

ChrisLebure a écrit:

Bonjour,

que nous dit l'inspecteur web ? image manquante ? autre ? quelles dimensions donne-t-il pour la div contenant l'image ?

attention, les 100% sont très souvent à bannir ... en particulier width:100%, complètement inutile

et à quoi sert la div header_texture ? mets le background sur header, c'est suffisant et vire header_texture

et header__mask ne semble pas vraiment utile,

simplifie tout !

Bonjour,

Je te remercie pour t'as réponse, Non, il n'y a aucune erreur dans l'inspecteur l'image, elle est bien link. Il donne 1905x450 pour la div header__texture.

Du coup j'enlève le width 100%.

La .header__texture me permet de link l'image via le css.

Le header mask permet de rendre le bas de l'image arrondie, ce qui le rends plus propre de mon point de vue.