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

HTML

Posted by Steven Prescott
Steven Prescott
19,206 Points

Scalable 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?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Make a codepen so we can see the bigger picture.

Steven Prescott
Steven Prescott
19,206 Points

Here ya go James. http://codepen.io/anon/pen/afgLK Thanks!

2 Answers

klam tine
klam tine
15,524 Points 
html {
    background-size: cover;
}
Steven Prescott
Steven Prescott
19,206 Points

Thanks. Also, how would I change my background to an svg?

klam tine
klam tine
15,524 Points

You are already using SVG as background-image, or you want you background-image scalable while the window resizes?

Steven Prescott
Steven Prescott
19,206 Points

I 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
klam tine
15,524 Points

What 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
klam tine
15,524 Points

What 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
Steven Prescott
19,206 Points
Steven Prescott
Steven Prescott
19,206 Points

Thank you!