Đặt hình ảnh ở góc trên cùng bên phải - CSS

Tôi cần hiển thị hình ảnh ở góc trên cùng bên phải của một div (hình ảnh là dải băng "đường chéo") nhưng vẫn giữ văn bản hiện tại được chứa trong một div bên trong, giống như bị dính vào đầu của nó.

Tôi đã thử những thứ khác nhau như bao gồm hình ảnh trong một div khác hoặc xác định lớp của nó như:

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

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

nhưng không có bất kỳ may mắn. Kết quả tốt nhất mà tôi nhận được là tất cả văn bản được cuộn xuống cho cùng kích thước chiều cao của hình ảnh.

Bất kỳ ý tưởng?

Bạn chỉ có thể làm như thế này:

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

Định vị divtương đối và đặt dải băng hoàn toàn bên trong nó. Cái gì đó như:

#content {
  position:relative;
}

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

Trong khi xem xét cùng một vấn đề, tôi đã tìm thấy một ví dụ

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

Mẹo ở đây là tạo một PNG (hoặc GIF) nhỏ, (tôi đã sử dụng GIMP) có nền trong suốt, (và sau đó chỉ cần xóa góc dưới cùng đối diện.)