Posisikan gambar latar belakang CSS x piksel dari kanan?

Saya pikir jawabannya tidak, tetapi bisakah Anda memposisikan gambar latar belakang dengan CSS, sehingga itu adalah jumlah piksel yang tetap jauh dari kanan?

Jika saya mengatur background-positionnilai x dan y, tampaknya mereka hanya memberikan penyesuaian piksel tetap dari kiri dan atas masing-masing.

background-position: right 30px center;

Ini berfungsi di sebagian besar browser. Lihat: http://caniuse.com/#feat=css-background-offsets untuk daftar lengkap.

Informasi lebih lanjut: http://www.w3.org/TR/css3-background/#the-background-position

Dimungkinkan untuk menggunakan atribut bordersepanjang dari kanan

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

Ada satu cara tetapi tidak didukung di setiap browser (lihat cakupan di sini )

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

Ini bekerja di setiap browser modern , tetapi ada kemungkinan bahwa IE9 mogok . Juga tidak ada cakupan untuk = <IE8.

Sejauh yang saya tahu, spesifikasi CSS tidak memberikan apa yang Anda minta, di luar ekspresi CSS, tentu saja. Menolak asumsi bahwa Anda tidak ingin menggunakan ekspresi atau Javascript, saya melihat tiga solusi peretasan:

• Pastikan gambar latar belakang Anda cocok dengan ukuran wadah (setidaknya lebarnya) dan atur background-repeat: repeatatau repeat-xjika hanya lebarnya yang disamakan. Kemudian, memiliki sesuatu yang muncul xpiksel dari kanan semudah background-position: -5px 0px.
• Menggunakan persentase untuk background-positionmenunjukkan perilaku khusus yang lebih baik dilihat daripada yang dijelaskan di sini. Cobalah. Pada dasarnya,background-position: 90% 50% akan membuat tepi kanan garis gambar latar naik 10% dari tepi kanan wadah.
• Buat div yang berisi gambar. Secara eksplisit mengatur posisi elemen yang mengandung position: relativejika belum diatur. Atur wadah gambar ke position: absolute; right: 10px; top: 10px;, jelas menyesuaikan dua final sesuai keinginan Anda. Tempatkan wadah gambar div ke dalam elemen yang mengandung.

Coba ini:

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

Perhatikan bahwa kode di atas akan memindahkan seluruh elemen (bukan hanya gambar latar belakang) 5px dari kanan. Ini mungkin ok untuk kasus Anda.

Anda dapat melakukannya di CSS3:

background-position: right 20px bottom 20px;

Ini bekerja di Firefox, Chrome, IE9 +

Sumber: MDN

Penanganan masalah gambar dengan piksel transparan di sebelah kanan berfungsi sebagai margin kanan.

Solusi gambar untuk hal yang sama adalah membuat gambar PNG atau GIF (format file gambar yang mendukung transparansi) yang memiliki bagian transparan di sebelah kanan gambar persis sama dengan jumlah piksel yang ingin Anda berikan margin kanan ( mis: 5px, 10px, dll.)

Ini berfungsi dengan baik secara konsisten di seluruh lebar tetap serta lebar dalam persentase. Praktis solusi yang baik untuk header akordeon yang memiliki gambar panah plus / minus atau atas / bawah di kanan header!

Kelemahan: Sayangnya, Anda tidak dapat menggunakan JPG kecuali bagian latar belakang wadah dan warna latar belakang gambar latar belakang CSS memiliki warna datar yang sama (tanpa gradien / sketsa), kebanyakan putih / hitam dll.

Jika Anda menemukan topik ini di browser modern sekarang ini, Anda dapat menggunakan pseudo-class: setelah itu melakukan apa saja yang praktis dengan latar belakang.

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

css ini akan menempatkan latar belakang ke sudut kanan bawah elemen ".container" dengan ruang 20px di sisi kanan.

Lihat biola ini misalnya http://jsfiddle.net/h6K9z/226/

Jawaban yang paling tepat adalah sintaks empat nilai baru untuk posisi latar belakang, tetapi sampai semua browser mendukungnya, pendekatan terbaik Anda adalah kombinasi dari respons sebelumnya dalam urutan berikut:

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+ */

Masukkan saja bantalan piksel ke dalam gambar - tambahkan 10px atau apa pun ke ukuran kanvas gambar di photoshop dan selaraskan langsung di CSS.

Saya sedang mencoba melakukan tugas yang sama untuk mendapatkan panah dropdown selalu di sisi kanan header tabel dan muncul dengan ini yang tampaknya bekerja di Chrome dan Firefox, tetapi safari mengatakan kepada saya itu adalah properti yang tidak valid.

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

Setelah melakukan sedikit main-main di inspektur, saya datang dengan solusi lintas-browser yang bekerja di IE8 +, Chrome, Firefox, dan Safari, serta desain responsif.

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

Berikut ini adalah codepen tentang tampilannya dan cara kerjanya. Codepen ditulis dengan SCSS - http://cdpn.io/xqGbk

Jika Anda hanya ingin menentukan sumbu x, Anda dapat melakukan hal berikut:

background-position-x: right 100px;

Solusi lain yang belum pernah saya sebutkan adalah menggunakan elemen pseudo dan saya yakin solusi ini akan bekerja dengan browser yang mendukung CSS 2.1 (≥ IE8, ≥ Safari 2, ...) dan juga harus responsif:

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;
}

Contoh : Elemen mis. 100px berukuran persegi (tanpa mempertimbangkan batas) memiliki padding 10px dan gambar latar belakang harus ditampilkan di dalam padding kanan. Ini berarti elemen pseudo adalah persegi berukuran 80px. Kami ingin menempelkannya di perbatasan kanan elemen dengan kanan: -10px; . Jika kita ingin memiliki latar belakang-gambar 5px jauh dari perbatasan kanan kita perlu menempelkan elemen pseudo-5px dari perbatasan kanan elemen dengan kanan: -5px; ... Uji sendiri untuk Anda di sini: http://jsfiddle.net/yHucT/

Jika wadah memiliki ketinggian tetap: Tweek persentasenya (posisi latar belakang) sampai pas dengan benar.

Jika wadah memiliki ketinggian dinamis: Jika Anda ingin bantalan antara latar belakang dan wadah Anda (seperti saat input styling khusus, pilih), tambahkan padding Anda ke gambar Anda dan atur posisi latar belakang ke kanan atau bawah.

Saya tersandung pada pertanyaan ini ketika saya mencoba untuk mendapatkan latar belakang untuk kotak pilih agar sesuai katakan 5 px dari kanan pilih saya. Dalam kasus saya, latar belakang saya adalah panah bawah yang akan menggantikan ikon drop-down dasar. Dalam kasus saya, padding akan selalu tetap sama (5-10 piksel dari kanan) untuk latar belakang, jadi ini adalah modifikasi yang mudah untuk membawa ke gambar latar belakang yang sebenarnya (membuat dimensinya 5-10 piksel lebih lebar di sisi kanan.

Semoga ini membantu!

Anda dapat memposisikan gambar latar belakang dalam editor menjadi x piksel dari sisi kanan.

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

Gambar latar belakang akan diposisikan di kanan atas, tetapi akan tampak x piksel dari kanan.

Persentase Tweet dari kiri agak rapuh untuk selera saya. Ketika saya membutuhkan sesuatu seperti ini, saya cenderung menambahkan penataan wadah saya ke elemen pembungkus dan kemudian menerapkan latar belakang pada elemen dalam denganbackground-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>

The .content-breakoutkelas opsional dan akan memungkinkan konten Anda untuk makan dalam padding jika diperlukan (nilai margin yang negatif harus sesuai dengan nilai-nilai yang sesuai di padding wrapper). Ini sedikit bertele-tele, tetapi bekerja dengan andal tanpa harus khawatir tentang posisi relatif gambar dibandingkan dengan lebar dan tinggi.

Sudah lama sejak pertanyaan ini diajukan, tetapi saya hanya mengalami masalah ini dan saya mendapatkannya dengan melakukan:

background-position:95% 50%;

Solusi untuk nilai negatif. Sesuaikan bantalan-kanan untuk memindahkan gambar.

<div style='overflow:hidden;'>

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

    </div>

</div>

Ini berfungsi di Chrome 27, saya tidak tahu apakah itu valid atau tidak atau apa yang browser lain lakukan dengannya. Saya terkejut tentang hal ini.

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

Berfungsi untuk semua browser nyata (dan untuk IE9 +):

background-position: right 10px top 10px;

Saya menggunakannya untuk tema RTL WordPress. Lihat contoh: situs web sementara atau situs web sebenarnya akan segera aktif. Lihatlah ikon di sudut kanan DIV besar.

Lebih baik untuk semua latar belakang: url ('../ images / bg-menu-dropdown-top.png') meninggalkan 20px atas tanpa-ulangi! Penting;