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

Posted by James Hollingworth
James Hollingworth
3,662 Points

SVG as background images in CSS won't appear once published

Hi

I am new to SVGs . I have a logo which I am serving as a background images in css, but they don't appear once they are uploaded to my site, but will appear locally. I am missing a bit of magic code to make them appear?

background: url('images/logo.svg') no-repeat;

thanks

7 Answers

James Hollingworth
James Hollingworth
3,662 Points
James Hollingworth
James Hollingworth
3,662 Points

Thank you for your help. Where would I add image/svg+l. The images are just embedded in the css background property. If thats what you mean?

James Hollingworth
James Hollingworth
3,662 Points
James Hollingworth
James Hollingworth
3,662 Points

I have used

background-size: contain;

but still no luck

And I have specified width and height

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi James,

Can you please post a link to your site, or provide a Codepen example?

Thanks!

James Hollingworth
James Hollingworth
3,662 Points
James Hollingworth
James Hollingworth
3,662 Points

Hi Guil

Hope you can help, its http://www.jameshollingworth.com/newindex.html The site is only partly built. but the main image and logo are missing.

Thanks

James

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi James,

When I inspected your code, the console displayed the following error for each of your SVGs:

"Resource interpreted as Image but transferred with MIME type text/xml"

When it should be image/svg+xml

How are you embedding/adding them to the page?

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi James,

The issue is that the SVG file is not being served correctly. Depending on your server, there are a few ways to correct this. It seems like you're running on Apache – take a look at these helpful instructions that should help you fix this.

The link also has a MIME type checker that will test your SVG file on the server once you're done.

James Hollingworth
James Hollingworth
3,662 Points
James Hollingworth
James Hollingworth
3,662 Points

really, now thats interesting. Its easy to assume my hosting would just serve them but obviously it doesn't . I just accessed my .htaccess and copied the extra settings into it from that link of yours and now it works.

thanks you very much for your help. really appreciated.

Thanks