Le positionnement de l'image de fond, en ajoutant du rembourrage

Je voudrais ajouter un arrière-plan d'un div, la position du centre droit, mais!, avoir du rembourrage à l'image. La div a rembourrage pour le texte, j'ai donc retrait de l'arrière-plan un peu. probablement plus de sens w/exemple:

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

Merci!

InformationsquelleAutor Ian Davis | 2011-11-01
  1. 84

    Mise À Jour De Réponse:

    Il est fait observer à plusieurs reprises que ce n'est pas la bonne réponse à cette question, et je suis d'accord. De retour lorsque cette réponse a été écrit, c'est à dire 9 était encore nouveau (environ 8 mois) et de nombreux développeurs, y compris moi-même besoin d'une solution pour <= IE 9. IE 9 est quand IE a commencé à soutenir background-origin. Cependant, cela fait plus de six ans et demi, voici donc la mise à jour de la solution que je recommande fortement à l'aide d'une véritable frontière. Dans le cas où < IE 9 le soutien est nécessaire. Ma réponse originale à cette question peut être trouvée ci-dessous, extrait de la démo. Il utilise une opaque frontière pour simuler le rembourrage pour les images d'arrière-plan.

    CSS:

    #hello {
  padding-right: 10px;
  background-color:green;
  background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
  background-origin: content-box;
}

    HTML:

    <p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>

    Réponse Originale À Cette Question:

    vous pouvez faux avec un 10px bordure de la même couleur que l'arrière-plan:

    http://jsbin.com/eparad/edit#javascript,html,vivre

    #hello {
   border: 10px solid #e8e8e8;
   background-color: green;
   background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
               no-repeat scroll right center #e8e8e8;
}
    • J'ai bien aimé cette réponse! Se sent hackish, mais j'approuve
    • Une autre façon, l'utilisation de la calc méthode dans le CSS. background-position-x: calc(100% - 4px);
    • Ou, pour utiliser le fond d'origine de la propriété developer.mozilla.org/en-US/docs/Web/CSS/background-origin qui est destiné à résoudre des problèmes comme celui-ci. IE9 et de soutien: jsbin.com/umuvud/50/edit
    • Génial! Vous pouvez même utiliser une bordure transparente, et si vous utilisez ems comme border-width, cela fonctionne très bien avec de la réceptivité. Pas très hackish à tous, juste très intelligent, à mon avis!
    • Qui est le génie. M'a aidé à me faire une image sur une position: correction d'élément d'en-tête agir de façon plus ou moins sensible aussi.
    • background-clip: content-box; Le fond est peint à l'intérieur de la boîte de contenu.
    • merci, on peut remplacer right center, de nombre comme 12px 30px trop
    • Que faire si nous voulons que les images répétées et toujours pad eux?
    • Merci @DanEastwell - votre commentaire, je crois, est la réponse correcte. background-origin: content-box m'a donné ce que j'attendais.

    InformationsquelleAutor Joseph Marikle
  2. 51

    c'est en fait assez facile à faire. Vous y êtes presque, de faire ce que vous avez fait avec background-position: right center;. Ce qui est réellement nécessaire dans ce cas est quelque chose de très bien comme ça. Nous allons convertir en pourcentages. Nous savons que center=50%, donc c'est assez facile. Maintenant, afin d'obtenir le rembourrage que vous avez voulu, vous avez besoin de la position de l'arrière-plan comme suit: background-position: 99% 50%.

    La deuxième, et la plus efficace façon de le faire est d'utiliser la même background-position idée, et il suffit d'utiliser background-position: 400px (width of parent) 50%;. Bien sûr, cette méthode nécessite une largeur statique, mais qui va vous donner la même chose à chaque fois.

    Méthode 1 (99% de 50%)

    Méthode 2 (400px 50%)

    • background-position: 99% de 50% est ce que je suis à la recherche d'. Merci.
    • Vous êtes un génie
    • C'est la réponse correcte. Merci.
    • bien meilleure réponse!
    InformationsquelleAutor John Fish
  3. 9

    Il ya effectivement une solution native pour cela, à l'aide de la quatre valeurs de background-position

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

    Cela signifie 10px à partir de la droite et de 20 pixels de haut.
    vous pouvez également utiliser trois valeurs la quatrième valeur sera le comte comme 0.

    • Je ne sais pas pourquoi ils ont marqué un hack comme la réponse correcte! ce est la bonne façon.
    • Cela ne semble pas fonctionner.
    • si vous êtes aussi essayez d'utiliser background-size: cover, a accepté de répondre le mieux, car il contrôle la taille de l'image correctement. Pour cette solution, vous devrez également définir la taille de l'image pour obtenir le rembourrage sur le droit (et le bas).
    InformationsquelleAutor Hejar
  4. 7

    vous pouvez utiliser le fond d'origine:padding-box; et puis ajouter un peu de rembourrage où vous voulez, par exemple: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;}
    De cette façon, vous joindre l'image à la div de remplissage de la boîte qui les contient sorte que vous pouvez placer où vous le souhaitez.

    InformationsquelleAutor Adrn
  5. 2

    Au cas où quelqu'un d'autre a besoin d'ajouter un rembourrage pour quelque chose avec background-image et background-size: contenir ou couvrir, j'ai utilisé le suivant qui est une belle façon de faire. Vous pouvez remplacer la frontière-largeur avec 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 à définir une largeur.

    InformationsquelleAutor JHair
  6. 0

    tout d'abord, pour être un peu à l'henpeck, il est préférable de ne PAS utiliser juste la <background> tag. plutôt, utilisez le bon, plus spécifiques, <background-image> tag.

    la seule façon que je suis conscient de faire une telle chose est de construire le rembourrage en l'image par l'extension de la matte. depuis le vide pixels ne sont pas supprimés, vous avez votre rembourrage là. donc, si vous avez besoin d'un 10px frontière, créer 10px de vide pixels tout autour de votre image. c'est mui simple dans Photoshop, Fireworks, GIMP, &c.

    je voudrais aussi vous recommande d'essayer le PNG8 format au lieu de la mort GIF... beaucoup mieux.

    il y a peut être une autre solution à votre problème si nous savions un peu plus de la façon dont vous l'utilisez. 🙂 il SEMBLE que vous essayez d'ajouter un accordéon bouton. ce serait mieux placé dans le code HTML, car alors vous pouvez cibler avec JavaScript/PHP; quelque chose que vous ne pouvez pas le faire si c'est dans l'arrière-plan (au moins pas tout simplement). dans un tel cas, vous pouvez définir le style du diable hors de l'image que vous avez actuellement dans le CSS en utilisant les éléments suivants:

    #hello img { padding: 10px; }

    WR!

    • Je suis juste en train de décalage de l'image d'arrière-plan à gauche 5px. De toute façon le faire sans modification de l'image?
    • ah. encore une fois, pas vraiment. le background-position balise <em>recherche</em> comme il pourrait être le lapin pour vous, mais il ne est <em>slide</em> l'image à l'intérieur de sa propre zone de délimitation. à quoi vous servent-il?
    • réponse de fonctionner, mais il peut créer des problèmes pour la mise en forme dans le reste de l'élément, parce que maintenant EVERTYHING apparaîtra comme si elle a un 10px pad et peut être négligé lors de la modification du style.
    • cela ne fonctionnera pas, car il n'y a pas de <div id="bonjour"><img src='...' /></div> (voir le lien dans ma question). grâce tho pour votre réponse!
    • ce que j'avais signifie est que, SI vous êtes allé de l'autre route, qui est le code à utiliser. 🙂 suppose que je n'étais pas très clair. désolé.
    InformationsquelleAutor WhiteRau
  7. 0

    D'ajouter de l'espace avant de l'image d'arrière-plan, on pourrait définir la largeur de l'élément qui est de l'utilisation de 'background-image' objet. Et puis de définir une valeur de pixel dans "background-position" de la propriété de créer un espace de gauche.

    Par exemple, j'avais un scénario où j'ai obtenu un menu de navigation qui avait une balle avant de liaison de l'élément et de la puce graphique ont été modifiable si corrosponding lien se transforme en un état actif. De plus, le lien actif avait aussi une couleur d'arrière-plan pour montrer, et cette couleur d'arrière-plan avait approximative 15px rembourrage à la fois sur la gauche et le côté droit de l'élément lien (donc sur la gauche, il comprend balle icône de lien trop).

    Tout padding-right de répondre à l'objectif d'avoir background-color étiré jusqu'à 15px plus à droite du texte du lien. Le padding-left seulement ajouté à l'espace entre le texte du lien et de balle.

    J'ai donc pris la largeur de la couleur d'arrière-plan de l'objet à partir de PSD de conception (par ex. 82px) et a ajouté qu'à l'élément li (dans une classe créée pour montrer l'état actif) et puis j'ai mis de fond-valeur de position de 20px. Qui a abouti à puce déplacé à l'intérieur du bord gauche. Et sa m'a fourni de sortie souhaité d'avoir padding à gauche avant de puce utilisé comme image d'arrière-plan.

    Veuillez noter que vous devrez peut-être ajuster votre padding /margin valeurs en conséquence, qui peut être utilisé soit pour l'espace entre les éléments lien ou l'espacement entre la puce et le texte du lien.

    InformationsquelleAutor Ravi Khandelwal