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

CSS

David Klotz
David Klotz
19,659 Points
Posted by David Klotz
David Klotz
19,659 Points

CSS content property + url: not displaying in firefox

I am trying to use the following:

html: <div class="main-logo img-responsive"></div>

css: .main-logo { content: url(../img/main_logo.svg); margin:0 auto; padding-left:10px; padding-top:80px; padding-bottom:10px; }

It displays perfectly in Safari, Chrome and on iOS, however it comes up blank in firefox. I have used the same property in other places on the page with the :before or :after pseudo element which do work in firefox. I'm trying to find out if there is a way to get this to work in firefox without the :before or :after pseudo element. Any help with this is much appreciated!

4 Answers

David Klotz
David Klotz
19,659 Points
David Klotz
David Klotz
19,659 Points

Thank you everyone for the feedback, I tried both methods mentioned regarding width/height, and still found myself with the same issue. After further playing around, I found that the same problem exists when substituting in a .png image as well. The issue seems to not be with the file format but rather the lack of the pseudo elements ":before/:after" being used. I haven't been able to find any documentation supporting the use of content:url without the :before/:after element. I was hoping this could work, in the browsers that it did it was fully responsive.

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

I think you have to set a height and width attribute for a .svg image to display in firefox.

Donny Stiefel
Donny Stiefel
7,682 Points
Donny Stiefel
Donny Stiefel
7,682 Points

Diane is right. Height and width need to be specified for SVG. An alternate method would be to set the dimensions of the containing div, and then set the height/width to 100%. Either way should work as long as you specify the dimensions.

Lauren Clark
Lauren Clark
33,155 Points
Lauren Clark
Lauren Clark
33,155 Points

Also check your MIME types if you're running a local server, I know Xampp is a pain for that, easy way is just to add support to the .htaccess

You can use

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Mime types - Apache