2

I am trying to rounding the sides of a background image with border-radius property.

Here is my scenario:

I placed a big image in a small division as background and put the overflow hidden. Now I need to round the small division. I successfully rounded the corner of small division. But the image's corner is not rounding.

HTML:

<div class="video_thumb">
    <div style="background-image: url(http://img.youtube.com/vi/mAYX42saxkI/0.jpg); " class="video-thumbnail"></div>
</div>​

CSS

.video_thumb {
    height: 250px;
    width: 300px;
    overflow:hidden;
    margin:20px;
    border: 1px solid red;
    z-index:100;
    position:relative;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.video-thumbnail {
    width: 520px;
    height: 100%;
    position: relative;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    z-index:10;
    overflow:hidden;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Here is a demo using jsfiddle

You can see the top left and bottom left border are rounded. But top right and bottom right corner are not rounded. How can we make all the corners of image rounded?

I tried adding z-index, overflow: hidden to both divs, but no luck.

EDIT:

This problem is only with Google Chrome. Working fine on Firefox browser.

Libin
  • 2,442
  • 3
  • 20
  • 31
  • I am only finding this problem in Chrome - are you finding this an issue in other browsers? – My Head Hurts Oct 12 '12 at 12:20
  • I tried it in chrome only. But at any cost i needs to work this on chrome. I don't care about other browsers. – Libin Oct 12 '12 at 12:28
  • Interesting mantra - but you should update your question to reflect that it is a chrome problem. Anyway, it is a Chrome bug and seems to be caused by using `position: relative`. Get rid of that and your wildest dreams will come true. – My Head Hurts Oct 12 '12 at 12:29
  • You are right @MyHeadHurts. This problem is only with Google Chrome. Working fine in firefox. I just updated the question – Libin Oct 12 '12 at 12:39

3 Answers3

2

This appears to be a Chrome bug and you should consider raising it as such @ http://code.google.com/p/chromium/issues/list

For now, you can "work around it" by changing position: relative to position: static

A Hacky Fix

As answered here, you can add a -webkit-mask-image to the parent element to hide the overflowing content:

.video_thumb {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
Community
  • 1
  • 1
My Head Hurts
  • 37,315
  • 16
  • 75
  • 117
  • Yes making `position: static` will solve the problem in jsfiddle, but it is affecting my markups when I applied to the website. Anyway this is a great help!! +1 i'm searching for any other work arounds. – Libin Oct 12 '12 at 12:44
  • @Libin, I have added a hack that will resolve this. This hack was taken from the following SO answer by graycrow http://stackoverflow.com/a/10296258/681807 – My Head Hurts Oct 12 '12 at 14:13
0

You can try using this piece of code http://jsfiddle.net/shubhanshumishra/e94q3/10/ You don't need to set border radius for both the wrapping div and the div with image.

Here is the code:

.video-thumbnail{

background-image: url(http://img.youtube.com/vi/mAYX42saxkI/0.jpg);;

width: 300px;

height: 250px;

border: 8px solid #666;

 border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

​You can use the background-position property to clip the area you want. Also you can use the background-size property to stretch your background image as you want.

Here is the link to the updated fiddle: http://jsfiddle.net/shubhanshumishra/e94q3/14/

Shubhanshu Mishra
  • 6,210
  • 6
  • 21
  • 23
  • Hey thanks for answering. But you changed the markup and styles. This is not I'm looking for. I'm placing the image in center and cropping it is for avoiding the black bands on top and bottom. Please stick with my mark ups. – Libin Oct 12 '12 at 12:33
0

Just Updated your Fiddle. Hope this will solve your problem.

DEMO

http://jsfiddle.net/saorabhkr/e94q3/13/

Removed fixed width from this class (.video-thumbnail) and put background-size in your markup where you are adding image/video.

Soarabh
  • 2,910
  • 9
  • 39
  • 57
  • This is not I'm looking for. I'm placing the image in center and cropping it is for avoiding the black bands on top and bottom. – Libin Oct 12 '12 at 12:34