Discussion :

[mitsukk1992]

Bonjour,

Je souhaite placer mon image correctement sur ce bloc (le check vert) :



L'image est au format svg est ressemble à ça (il n'y a pas de fond blanc et elle est ronde) :



Le problème c'est que l'image est grande pour le bouton et elle est automatiquement rognée, j'aimerai qu'elle soit placée de la même façon que la croix.

Voici mon code pour le formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
        <div class="child" style="display:inline;">
            <div class="check-salaried"></div>
            <button type="submit" class="{{$child->status}} select-child button-secondary @if($index==$child->index) selected @endif" 
                formaction="{{route('dpc.handle', ['draft'=> $child->draft_id, 'chapter'=>'salarie', 'next_index'=>$child->index])}}">
                <span>{{$child->title}}</span>
            </button>
            <a href="javascript:void(0);" onclick="deleteTrainee(this)" class="delete-child" data-url="{{route('dpc.delete.trainee',['draft'=>$draft->id, 'index'=>$child->index])}}">
                <i class="fa fa-times"></i>
            </a>
        </div>

Et le css de l'image (la div "check-salaried") :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.check-salaried {
    background: url(/images/icons/plain-check.svg) no-repeat center center !important;
    display: inline-block;
    position: absolute;
    height: 20px;
    width: 20px;
}

Merci pour votre aide,

[NoSmoking]

Bonjour,
il te faut mettre au conteneur <div class="child"> la déclaration position:relative pour que celui-ci puisse servir de référent.

Ensuite il te faut supprimer la valeur !important de la propriété background.

Il te faut « forcer » l'image de fond à couvrir la surface disponible avec la déclaration background-size:cover.

Si tu veux positionner cet élément en haut à droite de son conteneur alors joue avec les propriété right et top.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.child {
    display: inline-block; /* préférable */
    position: relative;
}
.check-salaried {
    background: url(/images/icons/plain-check.svg);
    background-size: cover;
/* display: inline-block; /* pas franchement utile */
    position: absolute;
    height: 20px;
    width: 20px;
    right: -.5em;
    top: -.5em;
}

Cela devrait le faire !