Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Clay Dunsmore
Front End Web Development Techdegree Graduate 35,081 PointsHow to render a repeated .svg as a background image in IE11
Hello everyone,
I've been trying for the better portion of the day to render the background.svg file on IE11 to no avail. I've used the following CSS to render the background.svg file.
.element {
background-color: #999;
background-image: url(background.svg);
background-size: 4% auto;
height: 3em;
color: transparent;
}
The element class is attached to my <body> tag on my svg update project. This works fine for Chrome and Firefox, and I get my desired result. However, for IE11 I get the background-color property (grey) only. I do not get the background.svg overlaying the grey background as I do in Chrome and Firefox. I've tried various hacks I've seen on the internet, but no joy in solving this issue. Any help is appreciated everyone.
4 Answers
jacobproffer
24,604 PointsHey Clay, I wish it were easier for me to test on Internet Explorer. I have to use BrowserStack or something similar since I'm on a Mac.
The most common issue I have with IE 11 is not having a height on an element that has a width. But it appears you already have a height. For a few experiments, could you try doing one of the following?
- Try adding a pixel or percentage width to your element class (Such as 400px or 100%).
- Use pixels or a percentage instead of ems when setting your height (Shouldn't be the issue).
Something similar to:
.element {
color: transparent;
background-color: #999;
background-image: url(background.svg);
background-position: top center;
background-size: 20px;
width: 400px; /* Or 100% */
height: 400px; /* Or 100% */
}
Clay Dunsmore
Front End Web Development Techdegree Graduate 35,081 PointsOk Jacob, I tried your recommendations and got some positive results. I commented out my background size and height in WebStorm 8 and added ninety percent width and height, added a 100px background-size, and centered the <body class="element">tag in my project as follows: .element { background-image: url('background.svg'); background-color: #999; background-size: 100px; height: 90%; width: 90%; margin: 0 auto; /* background-size: 4%; height: 3em;*/ }
Chrome, Firefox, and Opera render well. However, IE11 still has issues. However, I see an improvement. Now I actually have definition and can see the bones in my .svg image, but I have this new problem of spacing between the .svg repeated image on the x-axis. Do you know how to eliminate the white space between the repeated 'x' rows of svg images so the bones render seamlessly on both the x and y axis like Chrome etc.?
Here is the new problem in IE11 after making the above changes to the 'element' class in my external style sheet. Link: https://s31.postimg.org/l1cvq2kp7/problem_Background_Two.png
Clay Dunsmore
Front End Web Development Techdegree Graduate 35,081 PointsOk Jacob, I found a great article on CSS-Tricks titles "How to Scale SVG" by Amellia Bellamy-Royds. Link: https://css-tricks.com/scale-svg/. I went and altered the viewport attribute from a couple of floating numbers to two integers for width and height within the svg viewport attribute and the gap problem is solved. Thank you for your insight and guidance Jacob. It was much appreciated. :)
jacobproffer
24,604 PointsHey, that's awesome news! I wish I could have been of more help.
Clay Dunsmore
Front End Web Development Techdegree Graduate 35,081 PointsYou were awesome Jacob. You helped me with the .element problem which opened the door in helping me understand how to enlarge the .svg image in IE11. There are some things you still can't get off of CSS-Tricks and Stack Overflow. :) Thank you so much! :)
Clay Dunsmore
Front End Web Development Techdegree Graduate 35,081 PointsClay Dunsmore
Front End Web Development Techdegree Graduate 35,081 PointsHey Jacob, thanks for the reply. I tried adding quotes to the background image url address i.e.(url('background.svg')). However, I still have the same problem of the .svg image not rendering properly on the x and y axis in the background of the project. As I was examining the svg project through the ie11 developer tool, I noticed these white vertical lines in the background atop my #999 grey background-color. I discovered the white vertical lines were the actual background-image as I toggled them on and off within the ie11 developer tool. Now, the sixty four dollar question, how to I get the background image to render to its full dimensions in ie11 as it does in Chrome, Firefox, and Opera?
Problem Image showing the white vertical lines on the grey background. (The white vertical lines are the background.svg images as I discovered when toggling the vertical lines when toggling the background-image property in the ie11 developer tool.) Link: 'https://s31.postimg.org/4056f8iq3/problem_Background.png'
Here is the background.svg in its proper rendering on Chrome Link: https://s31.postimg.org/ypub15i4r/what_It_Should_Be.png