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

General Discussion

Matt Campbell
Matt Campbell
9,767 Points
Posted by Matt Campbell
Matt Campbell
9,767 Points

Dreamweaver is putting SVG into a scroll box

Just swapped out a 600px x 100px image from jpeg to svg and in Dreamweaver live design preview, the image is there but it is in a scroll box all of its own.

Preview in browser and the image shows as it should where it should.

If I add a 100% width to the html attribute, it shows up in Dreamweaver correctly but then screws around with the position in browser.

Can anyone help? It feels like a Dreamweaver setting to me but I could be wrong.

2 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Matthew,

I'd suggest breaking the code out of Dreamweaver and into a text editor. This is the huge advantage of avoiding WYSIWYG style editors - because what you see isn't always the same as what you get.

Do you think you could load your code into CodePen and then post the link here?

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Hi Nick,

Thanks for getting back to me.

Your reply answers another question I had which was why do you guys not recommend something like Dreamweaver? I really like a lot of the features it offers.

Here's the codepen link: http://codepen.io/Th3M8dH8tt3r/full/xciHK

Obviously, the logo doesn't show up but with the fluid grids and floating, you can clearly see where it is meant to go.

It must be a quirk of Dreamweaver because if I open the .svg in Dreamweaver, the logo shows up in the design preview absolutely perfectly.

While I have it on my mind, could you point me in the direction of a video or resource on how to use .svg files as backgrounds please? I may be wrong in thinking this, but my reasoning for wanting to use them as backgrounds is they will scale with the page as you add content? Example, if I use a gradient as a background it will stretch the background while maintaining the gradient properties so as the page grows longer, the gradient remains consistent.