Positionnement de l'image d'arrière-plan, ajout de remplissage

Question

J'aimerais ajouter un arrière-plan à un div, positionner le centre à droite, mais !, avoir un peu de remplissage à l'image. Le div a un rembourrage pour le texte, je veux donc indenter un peu l'arrière-plan. a probablement le plus de sens avec l'exemple :

http://jsbin.com/umuvud/edit#javascript,html,live

Merci!

Answer 1

Il existe en fait une solution native à cela, en utilisant les quatre valeurs de background-position

.CssClass {background-position: right 10px top 20px;}

Cela signifie 10px de droite et 20px du haut. vous pouvez également utiliser trois valeurs, la quatrième valeur sera considérée comme 0.

Answer 2

vous pouvez utiliser background-origin:padding-box; puis ajoutez du rembourrage où vous le souhaitez, par exemple : #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;} De cette façon, vous attachez l'image à la zone de remplissage div qui la contient afin que vous puissiez la positionner où vous le souhaitez.

Answer 3

Au cas où quelqu'un d'autre aurait besoin d'ajouter du rembourrage à quelque chose avec background-image et background-size:contain or cover , j'ai utilisé ce qui suit, ce qui est une bonne façon de le faire. Vous pouvez remplacer la largeur de bordure par 10% ou 2vw ou ce que vous voulez.

 .bg-image {
    background: url("/image/logo.png") no-repeat center #ffffff / contain;
    border: inset 10px transparent;
    box-sizing: border-box;
}

Cela signifie que vous n'avez pas besoin de définir une largeur.