CSS背景画像を右からxピクセルに配置しますか？

答えはノーだと思いますが、背景画像をCSSで配置して、右から一定のピクセル数離れたところに配置できますか？

background-positionxとyの値を設定すると、それらはそれぞれ左と上からの固定ピクセル調整のみを与えるようです。

background-position: right 30px center;

ほとんどのブラウザで動作します。完全なリストについては、http：//caniuse.com/#feat=css-background-offsetsを参照してください。

詳細：http : //www.w3.org/TR/css3-background/#the-background-position

border右から属性を長さとして使用可能

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

1つの方法がありますが、すべてのブラウザーでサポートされているわけではありません（こちらのカバレッジを参照）

element {
  background-position : calc(100% - 10px) 0;
}

最新のすべてのブラウザで動作しますが、IE9がクラッシュする可能性があります。= <IE8も対象外です。

私の知る限り、もちろん、CSS仕様は、CSS式以外では、あなたが求めていることを正確に規定していません。式やJavascriptを使用したくないという想定を元に、3つのハックな解決策を見つけました。

• 背景画像がコンテナのサイズ（少なくとも幅）と一致していることを確認し、幅のみが均一化されているbackground-repeat: repeatかrepeat-xどうかを確認してください。次に、何かをx右からピクセルで表示するのはと同じくらい簡単background-position: -5px 0pxです。
• パーセンテージを使用するbackground-positionと、ここで説明するよりもよくわかる特別な動作が見られます。試してみます。基本的にbackground-position: 90% 50%は、背景画像の右端がコンテナの右端から10％離れるようにします。
• 画像を含むdivを作成します。含まれている要素の位置がposition: relativeまだ設定されていない場合は、明示的に設定します。画像コンテナをに設定しposition: absolute; right: 10px; top: 10px;、明らかに最後の2つを適切に調整します。画像のdivコンテナを含む要素に配置します。

これを試して：

#myelement {
  background-position: 100% 50%;
  margin-right: 5px;
}

上記のコードでは、要素全体（背景画像のみではない）が右から5px移動することに注意してください。これはあなたのケースでは大丈夫かもしれません。

あなたはCSS3でそれを行うことができます：

background-position: right 20px bottom 20px;

Firefox、Chrome、IE9以降で動作します

出典：MDN

右マージンとして機能する右側の透明ピクセルによる画像の回避策。

同じ画像の回避策は、PNGまたはGIF画像（透明度をサポートする画像ファイル形式）を作成することです。この画像の右側の透明部分は、右マージンを指定するピクセル数（例：5px、10pxなど）

これは、固定幅およびパーセンテージの幅全体で一貫して適切に機能します。ヘッダーの右側にプラス/マイナスまたは上/下の矢印の画像が表示されているアコーディオンヘッダーの実用的なソリューションです。

欠点：残念ながら、コンテナの背景部分とCSS背景画像の背景色が同じフラットカラー（グラデーション/ビネットなし）、ほとんどが白/黒などでない限り、JPGを使用できません。

最近のブラウザの最近のトピックで偶然このトピックに遭遇した場合、疑似クラス：afterを使用して、バックグラウンドで実質的に何でも行うことができます。

.container:after{
    content:"";
    position:absolute;
    right:20px;
    background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}

このcssは、「。container」要素の右下隅に背景を配置し、右側に20ピクセルのスペースを置きます。

このフィドルの例を参照してくださいhttp://jsfiddle.net/h6K9z/226/

最も適切な答えは、バックグラウンドポジションのための新たな4値の構文ですが、すべてのまで、ブラウザがそれをサポートし、あなたの最善のアプローチは、次の順序で、以前の回答の組み合わせであります：

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

画像にピクセルのパディングを挿入するだけです-photohopで画像のキャンバスサイズに10pxまたはそれ以上のものを追加し、CSSで右に揃えます。

私は同様のタスクを実行して、常にテーブルヘッダーの右側にドロップダウン矢印を表示しようとしましたが、これはChromeおよびFirefoxで機能しているように見えましたが、Safariから無効なプロパティであることが通知されました。

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

インスペクターで少しいじった後、IE8 +、Chrome、Firefox、Safariで動作するこのクロスブラウザーソリューションとレスポンシブデザインを思いつきました。

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

これは、それがどのように見え、機能するかを示すコードペンです。CodepenはSCSSで書かれている- http://cdpn.io/xqGbk

x軸のみを指定する場合は、次の操作を実行できます。

background-position-x: right 100px;

私が言及していない別の解決策は、疑似要素を使用することです。この解決策は、CSS 2.1準拠のブラウザー（≥IE8、≥Safari 2、...）で動作し、応答性も高いと思います。

element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}

例：要素。サイズが100pxの正方形（境界線を考慮しない）には10pxのパディングがあり、背景画像は右側のパディングの内側に表示されます。これは、疑似要素が80pxサイズの正方形であることを意味します。要素の右の境界線にright：-10px;を付けたいと思います。。background-imageを右ボーダーから5px離したい場合は、要素の右ボーダーから5px離れた擬似要素をright：-5pxで固定する必要があります。...ここでテストしてください：http : //jsfiddle.net/yHucT/

コンテナの高さが固定されている場合： Tweekが正しく収まるまでのパーセンテージ（背景位置）。

コンテナーに動的な高さがある 場合：背景とコンテナーの間にパディングが必要な場合（カスタムスタイル入力、選択時など）、パディングを画像に追加し、背景の位置を右または下に設定します。

選択ボックスの背景を、選択範囲の右から5ピクセルに収まるようにしようとしているときに、この質問に遭遇しました。私の場合、私の背景は、基本的なドロップダウンアイコンに代わる下矢印です。私の場合、背景のパディングは常に同じ（右側から5〜10ピクセル）であるため、実際の背景画像に簡単に変更できます（サイズが右側で5〜10ピクセル広くなります）。

お役に立てれば！

エディタで背景画像を右側からxピクセルに配置できます。

background: url(images_url) no-repeat right top;

背景画像は右上に配置されますが、右からxピクセルのように見えます。

左からパーセンテージを微調整することは、私の好みでは少しもろいです。このようなものが必要な場合は、ラッパー要素にコンテナーのスタイルを追加し、内部要素に背景を適用する傾向がありますbackground-position: right bottom

<style>
    .wrapper {
        background-color: #333;
        border: solid 3px #222;
        padding: 20px;
    }
    .bg-img {
        background-image: url(path/to/img.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .content-breakout {
        margin: -20px
    }
</style>

<div class="wrapper">
    <div class="bg-img">
        <div class="content-breakout"></div>
    </div>
</div>

この.content-breakoutクラスはオプションであり、必要に応じてコンテンツをパディングに組み込むことができます（負のマージン値は、ラッパーパディングの対応する値と一致する必要があります）。これは少し冗長ですが、幅と高さに比べて画像の相対的な位置を気にする必要がなく、確実に機能します。

この質問が出されて以来、それは長引いていましたが、私はこの問題に遭遇しただけで、次のようにしてそれを取得しました：

background-position:95% 50%;

負の値の解決策。右のパディングを調整して画像を移動します。

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

これはChrome 27で機能しますが、それが有効かどうか、または他のブラウザが何をするかはわかりません。びっくりしました。

background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;

すべての実際のブラウザ（およびIE9 +）で動作します。

background-position: right 10px top 10px;

私はそれをRTL WordPressテーマに使用します。例を参照してください：一時的なWebサイトまたは実際のWebサイトは間もなく稼働します。大きなDIVの右隅にあるアイコンを見てください。

すべての背景に適しています：url（ '../ images / bg-menu-dropdown-top.png'）left 20px top no-repeat！important;