3

I've been trying to figure out exactly what these are called, and what library(s) you can use to implement them. Or maybe there's a straight CSS solution that I haven't seen?

Basically I want to add a label to the corner of some of my images. I want it to look like a pice of colored ribbon that says "New" or "Free". But I can't quite seem to figure out what these ribbons are called. Here's an example (note: the label is in the upper right hand corner).

edit: I'm a new user so I can't post images. Lame. But I understand the anti-spam premise behind it. Instead, here's a link to an example slideshow that has a "new" label across the corner:

http://www.slidesjs.com/

Googling has turned up "badges", but they look more like the iPhone badges and that's not what I want. Here's what those look like. Notice the red badges also in the upper right of the two sections of text below.

edit: removed second image.

I also turned up this link while searching, but the badge used in the example is ugly.

Position badge over corner of image automatically.

So I'm wondering if I'll have to create my own or if there's a plugin or pre-made solution out there. Thanks in advance!

Community
  • 1
  • 1
Tyler Youngblood
  • 2,710
  • 3
  • 18
  • 24

3 Answers3

2

You don't need Javascript for this. You can do it with good old css. Something along the lines of 

#badge{
    position: absolute;
    top: 0p;
    left: 0px;
}

You can change top to bottom, and left to right if you want it to appear in a different corner. The you just put your badge in the same div as your image like:

<div>
    <img id="badge" src="..." />
    <img src="..." />
</div>

Oh, the container div also needs position: relative; for the position: absolute inside it to work. Here's a link to a jsfiddle using images from the slideshow you linked me too:

http://jsfiddle.net/ky2Ac/

It looks a bit different because the added a white border around their image, but that's easy enough to do. The point is the badge :) Now you just need to find a good image with a transparant background to use for the badge (I don't know what else to call it either).

Paul
  • 139,544
  • 27
  • 275
  • 264
  • Thank you! After I read your answer it occurred to me that you had to have used something like Firebug to inspect the slideshow ... which was something I could have (should have) done. But for some reason that never occurred to me! I had one of those palm-to-the-forehead-doh moments. :D – Tyler Youngblood Jul 31 '11 at 14:09
  • For anyone else coming to this, here is a working example: http://jsfiddle.net/jshado1/G5pMZ/ – Jakob Jingleheimer Mar 22 '13 at 19:05
0

A simple way to do this is to place the banner as an image in a div and then the picture as the background-image of the div.

HTML

<div>
    <img src="http://assets.visrez.com/sites/gibsonhotel/Includes/images/corner_banner.png" />
</div>

CSS

div{background:url(http://www.health-for-dogs.com/wp-content/uploads/2011/05/old-dog-150x150.jpg) no-repeat;}

http://jsfiddle.net/jasongennaro/25cFh/1/

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • Thanks for the example code! So in your example, did you make or find that ribbon? Also, can the css be modified to offset the ribbon so that the edges go past the edge of the picture? The ribbon looks like it's meant to hang over the edges. I'm weak on CSS, so these responses have really helped a lot! – Tyler Youngblood Jul 31 '11 at 13:38
  • @Tyler. I just found the ribbon and the image via search and used for the example. You could design your own ribbon to be bigger than the image and get it to hang over the edges. Fyi, it needs to be transparent for it to work in this example, so a `.png` or a `.gif`. – Jason Gennaro Jul 31 '11 at 14:06
  • Ok, thanks. And if I understand correctly if the badge hangs over the edges 5px you just need to offset the background image so that it's 5px down and 5px further right (for an upper left badge), right? If that's correct no need to reply. Just checking to make sure I'm understanding correctly. Thanks! – Tyler Youngblood Jul 31 '11 at 15:27
0

Simple CSS.

Create the element with the banner graphic, place it in the root of your HTML code (ie inside the <body> tag, but not inside anything else), then style it as follows:

.banner {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}

Explanation:

position:fixed - this sets it so that its position is fixed in the browser window. You can scroll the rest of the page, and the banner won't move. (If you'd prefer it to move with the rest of the page, change it to position:absolute;)

top:0 and right:0 - do exactly what they sound like they should do, and position the banner in the top right corner of the page. Feel free to use bottom and left if you'd prefer. If you want to indent it slightly, set it something like this right:5px; (note the px for pixels).

z-index:1000 - this can be any value, or could even be left off entirely, depending on how the rest of you page is laid out. The idea is to ensure that the banner shows up in front of any other content you may have placed on the page.

Hope that helps.

Spudley
  • 166,037
  • 39
  • 233
  • 307