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

Steven Prescott
19,206 PointsScalable SVG or SVG background
Hello:
background-image: url('img/image.svg') no-repeat;
width: 100%;
height: 100%;
Can someone tell me why this isn't working in Chrome? When I used an object script the photo kept appearing too big.
Is it the SVG, or did I format the code incorrectly?

Steven Prescott
19,206 PointsHere ya go James. http://codepen.io/anon/pen/afgLK Thanks!
2 Answers

klam tine
15,524 Pointshtml {
background-size: cover;
}

Steven Prescott
19,206 PointsThanks. Also, how would I change my background to an svg?

klam tine
15,524 PointsYou are already using SVG as background-image, or you want you background-image scalable while the window resizes?

Steven Prescott
19,206 PointsI tried using the SVG (code above) but it wasn't working in Chrome. On the above Codepen I had to use a .jpg. I was just wondering how to make the vector graphic apply to the page and only use the jpeg as a fallback.

klam tine
15,524 PointsWhat does 'dont work' exactly means? It doesn't even render? Chrome do support SVG as background-image. (For more information, please check HERE)
Fallback can be achieved with Modernizr
Recommend Reading:
Using SVG -- From CSS trick Using SVG for Flexible, Scalable, and Fun Backgrounds -- From AlistApart

klam tine
15,524 PointsWhat does 'dont work' exactly means? It doesn't even render? Chrome do support SVG as background-image. (For more information, please check HERE)
Fallback can be achieved with Modernizr
Recommend Reading:
Using SVG -- From CSS trick Using SVG for Flexible, Scalable, and Fun Backgrounds -- From AlistApart

Steven Prescott
19,206 PointsThank you!
James Barnett
39,199 PointsJames Barnett
39,199 PointsMake a codepen so we can see the bigger picture.