background-size css property in Internet Explorer

Question

Hi I am using IE 11 and am having an issue with the background-size:cover property. Now before you say this question has already been asked and answered. I have looked through all of those solutions and they do not solve it. I am using a bootstrap .well I have tried <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1"/>

as well as <meta http-equiv="X-UA-Compatible" content="IE=EDGE,chrome=1"/>

and finally this is my current css that should solve the issue. It works in every browser besides IE. I am using IE 11

CSS:

#well1 {
margin-top:600px;
background: url('/images/arch-grey.svg') center;
background-repeat: no-repeat;
background-size: cover; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: rgb(114, 127, 139);
z-index: 1;
}

HTML:

                    <div class="well" id="well1">
                    <h3></h3>
                    <h1>Forms</h1>
                    <h2></h2>
                    <p>Pellentesque habitant morbi tristique senectus et netus et
                        malesuada fames ac turpis egestas. Vestibulum tortor quam,
                        feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu
                        libero sit amet quam egestas semper. Aenean ultricies mi vitae
                        est. Mauris placerat eleifend leo.</p>
                    <a
                        th:href="@{/forms/}"
                        class="arrow">Go to Forms</a>
                </div>

The problem could be related to the use of a SVG image for the background and not to the size property maybe, have U tried with a png or jpg ... — DaniP, Jan 24 '18 at 21:21
@DaniP I kind of did say the issue, but not strictly. updated. I have not tried with png or jpg as I only have this image as a svg — ebraun99, Jan 24 '18 at 21:26
just try with another img png or jpg to isolate the right problem ... — DaniP, Jan 24 '18 at 21:27
@DaniP the whole issue was the svg file. Is there a way to handle this or do I need to convert them to png or jpeg? — ebraun99, Jan 24 '18 at 21:36
Maybe read this https://stackoverflow.com/questions/21840551/background-size-with-svg-squished-in-ie9-10 ... or this https://stackoverflow.com/questions/34225933/ie11-using-svg-as-background-image-fails — DaniP, Jan 24 '18 at 21:40

score 3 · Answer 1 · answered Jan 24 '18 at 22:55

3

According to CanIUse, IE (and Edge) do not scale SVG files properly.

Make sure that the SVG has width, height and viewBox attributes combined with these workaround CSS rules.

Alternatively, take a look at this question.

answered Jan 24 '18 at 22:55

Lars Gyrup Brink Nielsen

3,939
2
34
35

background-size css property in Internet Explorer

1 Answers1