Sağ üst köşeye bir görüntü yerleştirme - CSS

Bir div'in sağ üst köşesinde bir resim görüntülemem gerekiyor (resim "diyagonal" bir şerittir), ancak üst kısmına yapıştırılmış gibi dahili bir div'de bulunan geçerli metni korumam gerekiyor.

Görüntüyü başka bir div'e dahil etmek veya sınıfını şöyle tanımlamak gibi farklı şeyler denedim:

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

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

ama şanssız. Aldığım en iyi sonuç, görüntünün aynı yükseklik boyutu için aşağı kaydırılan tüm metinlerdi.

Herhangi bir fikir?

Bunu şu şekilde yapabilirsiniz:

#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>

Yerleştirin divnispeten ve içindeki kesinlikle kurdeleyi yerleştirin. Gibi bir şey:

#content {
  position:relative;
}

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

Aynı soruna bakarken bir örnek buldum

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

Buradaki hile, şeffaf bir arka plana sahip küçük bir (GIMP kullandım) bir PNG (veya GIF) oluşturmak (ve sonra sadece karşı alt köşeyi silmek.)