10

i've a div with border-radius and a background-image, this is displayed well in all browsers except in Internet Explorer 11, where, the background-image appears blurred.

How i can fix this problem?

<span class="button boxsizing soundicon"></span>

CSS:

.roomscene .top .roominfo .center span.button {
    height: 29px;
    width: 29px;
    background-color: #23221d;
    border-radius: 7px;
    border: 2px solid #494742;
    margin-top: -10px;
    display: inline-block;
    float: right;
}

.roomscene .top .roominfo .center span.button:hover {
    background-color: #2f2d27;
    cursor: pointer;
}

.roomscene .top .roominfo .center .soundicon {
    background: #23221d url('../images/rooms/roominfo/soundicon.png') no-repeat center center;
}

EDIT:

I've noticed that if i remove the "center center" position of the background from .soundicon (or the border-radius from span.button), the blur disappears, but i anyway need to position correctly my background...

EDIT2:

Really weird bug of IE11, seems that if i specify position in px instead of center or 50%, the background-image didn't blur/be messy.

Internet Explorer still is a bad browser.

EDIT3:

None, with px position, already blur on some images, but less than if i use center/%.

LIVE EXAMPLE:

http://codepen.io/toomuchdesign/pen/ojspA

Andrea Carraro
  • 9,731
  • 5
  • 33
  • 57
Mattia Del Franco
  • 385
  • 5
  • 21

1 Answers1

0

Place bg image inside a span element. This will keep border radius and background image in different elements.

.element {
    border-radius: 7px;
    border: 2px solid #494742;
 }

.element span {
    background-image:url('imagepath.png');
 }
S.M. Pat
  • 308
  • 3
  • 12