-1

I currently have a background image with background-position: center bottom; also tried background-position-x: center; background-position-y: bottom but for internet explorer it does not work. THe image is sticking to the top. Is there a solution to set the background image position to the bottom that will work for all browsers?

I forgot to mention I am using SVG as the background image.

henhen
  • 1,038
  • 3
  • 18
  • 36
  • Is it really `position: bottom;`? – Carl Binalla Dec 15 '17 at 05:12
  • I meant background position but that doesnt change the problem I have – henhen Dec 15 '17 at 05:17
  • Can you edit your question to include some code @henhen? This should work but the parent element may be shorter than you think or the background properties may be being overwritten. – JasonB Dec 15 '17 at 05:29
  • Possible duplicate of [svg background image position is always centered in internet explorer, despite background-position: left center;](https://stackoverflow.com/questions/17944354/svg-background-image-position-is-always-centered-in-internet-explorer-despite-b) – Kaiido Dec 15 '17 at 05:55

1 Answers1

0

The background-position css property works as expected in Internet Explorer even if you are using an svg as the background image.

div {
  height: 100px;
  width: 100px;
  background-color: #ddd;
  background-position: bottom center;
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-image: url(https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg);
}
<div></div>
Community
  • 1
  • 1
JasonB
  • 6,243
  • 2
  • 17
  • 27
  • It must be dont in regular Internet Exploter 9-11 not IE Edge with emulation. I am also using SVG as background – henhen Dec 15 '17 at 05:45
  • Still works with an svg as the background image, in IE - not Edge with emulation - but not all svgs are created equal and you haven't posted your code so there may be additional issues. – JasonB Dec 15 '17 at 06:06