How do i add a banner to an img?

[applytobecome]

Hi everyone i think this should be simple but how do i add a background image that fits like the example i have provided?

How do i add a banner on this image on the top left corner

Example on how it should look like

Which html/css should i use?

[Mateus]

In case that blue label is also an image, you can probably give it a position value of absolute and play with top and left values, so:

.blue-label-element {
  position: absolute;
  top: 0;
  left: 15px;
}

I wonder if you think it’s better to edit that image and add the blue label as part of it. That’s how I’d personally do it.

Ps.: That is an awesome photo of a crow riding a motorbike.

[applytobecome]

Well this is not really an option since i export the different video data with php through mysqli and i use the thumbnails premade from YT

I dont want to spend time editing each picture so it would be alot easier with something premade like a css class

It is an img, i will try this right away

[SamA74]

I’m trying to do a Pen for it. not there yet. Don’t know why the overflow is not working to hide the ends of the banner.

[Mateus]

.blue-label-selector {
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    height: 0;
    width: 100px;
    -webkit-transform: rotate(315deg);
    -moz-transform:    rotate(315deg);
    -ms-transform:     rotate(315deg);
    -o-transform:      rotate(315deg);
    transform:         rotate(315deg);
}

This will create a shape that looks like what you want. You can play with the values to adjust it to your needs.

Here, I follow @SamA74’s idea and built a pen (it’s my first time using it actually, and it’s pretty useful).

[SamA74]

Updated mine, it’s getting better.

[applytobecome]

This was actually enough , i just ensured the width/height of the banner was the same as the thumbnail/img i used

Thanks!

[coothead]

Hi there applytobecome,

here is another possible solution…

[code]

untitled document body { background-color:#f0f0f0; } #image-holder { position:relative; max-width:480px; margin:auto; overflow:hidden; box-shadow:6px 6px 6px rgba(0,0,0,0.5); } #image-holder img { display:block; width:100%; } #ribbon { position:absolute; top:0; width:196px; line-height:48px; margin:0; border-bottom:1px solid #033; color:#fff; text-align:center; text-transform:capitalize; text-shadow:0 0 1px #011; background-image:linear-gradient(to right,#0cc,#256a89);/*#088,#0ff*/ box-shadow:0 6px 6px rgba(0,0,0,0.75); transform: translate(-54px,18px) rotate(-45deg); }

banner

[/code]

coothead

[SamA74]

@SamA74

Don’t know why the overflow is not working to hide the ends of the banner.

Such a clot sometimes, that was because I had the banner absolute, but forgot to make the figure relative, so ended up making the banner relative and had to mess about with translate to place it.
Put that right and this time I think I nailed it so it’s fully responsive.