CODEWITHSUNDEEP
cssbackground-image
Blackbam
Blackbam

Reputation: 19406

CSS: Background size contain and positioning in IE/Safari

Hello there I am a bit confused by the behaviour on a responsive CSS background image in IE11/Safari 5 which works well in Chrome and Firefox:

#contentheader_logo_inner {
    background:url('images/logo.svg') right top no-repeat;
    background-size: contain;
    display:inline-block;
    max-width:200px;
    width:100%;
    height:100%;
}

The thing is that the svg background image is perfectly contained within the dynamically scaled div (which has a width/height in percent), but in IE and Safari it is always displayed LEFT instead of RIGHT when scaling.

Is there a solution to this?

Upvotes: 2

Views: 677

Answers (1)

DavidBackend
DavidBackend

Reputation: 29

Your code:

#contentheader_logo_inner {
    background:url('images/logo.svg') right top no-repeat;
    background-size: contain; /* thats wrong */
    display:inline-block;
    max-width:200px;
    width:100%;
    height:100%;
}

Change:

#contentheader_logo_inner {
    background:url('images/logo.svg') right top no-repeat;
    background-size: 100% 100%; /* full size background */
    background-origin: content-box; /* this placing the background the words place (content-box) */
    display:inline-block;
    max-width:200px;
    width:100%;
    height:100%;
}

Upvotes: 1

Related Questions