Menempatkan gambar ke sudut kanan atas - CSS

Saya perlu menampilkan gambar di pojok kanan atas div (gambar adalah pita "diagonal") tetapi mempertahankan teks saat ini yang terkandung dalam div internal, seperti menempel di atasnya.

Saya mencoba berbagai hal seperti memasukkan gambar ke div lain atau mendefinisikan kelasnya seperti:

.ribbon {
   position: relative;
   top: -16px;
   right: -706px;
}

<div id="content">
   <img src="images/ribbon.png" class="ribbon"/>
   <div>some text...</div>
</div>

tapi tidak berhasil. Hasil terbaik yang saya dapatkan adalah semua teks yang digulir ke bawah untuk ukuran tinggi gambar yang sama.

Ada ide?

Anda bisa melakukannya seperti ini:

#content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 0px;
}

<div id="content">
    <img src="images/ribbon.png" class="ribbon"/>
    <div>some text...</div>
</div>

Posisikan divrelatif, dan posisikan pita tepat di dalamnya. Sesuatu seperti:

#content {
  position:relative;
}

.ribbon {
  position:absolute;
  top:0;
  right:0;
}

Saat melihat masalah yang sama, saya menemukan sebuah contoh

<style type="text/css">
#topright {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 125px;
    width: 125px;
    background: url(TRbanner.gif) no-repeat;
    text-indent: -999em;
    text-decoration: none;
}
</style>

<a id="topright" href="#" title="TopRight">Top Right Link Text</a>

Trik di sini adalah membuat kecil, (Saya menggunakan GIMP) PNG (atau GIF) yang memiliki latar belakang transparan, (dan kemudian hapus saja sudut bawah yang berlawanan.)