Placing an image to the top right corner - CSS

Question

I need to display an image on the top-right corner of a div  the image is a  diagonal  ribbon  but keeping the current text contained in an internal div  like stuck to the top of it   I tried different things as including the image in another div or defining its class like    ribbon      position  relative     top  -16px     right  -706px      lt div id  content  gt      lt img src  images ribbon png  class  ribbon   gt      lt div gt some text    lt  div gt   lt  div gt    but without any luck  The best result I got was all the text scrolled down for the same height size of the image   Any idea

User · Answer

Position the div relatively  and position the ribbon absolutely inside it  Something like    content     position relative      ribbon     position absolute    top 0    right 0

User · Answer

You can just do it like this    content       position  relative     content img       position  absolute      top  0px      right  0px      lt div id  content  gt       lt img src  images ribbon png  class  ribbon   gt       lt div gt some text    lt  div gt   lt  div gt

User · Answer

While looking at the same problem  I found an example    lt style type  text css  gt   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     lt  style gt    lt a id  topright  href     title  TopRight  gt Top Right Link Text lt  a gt    The trick here is to create a small   I used GIMP  a PNG  or GIF  that has a transparent background   and then just delete the opposite bottom corner

[html] Placing an image to the top right corner - CSS

Examples related to html

Examples related to css