Streaming live at 10am (PST)

SVG Background stretch

Is it possible to make a section background 100% width AND height without cropping? I have a vector image that could stretch with the section.


1 Like

Yes, not only with SVG but with all formats.

1 Like

Hey Vincent! That doesn’t seem to work for me…

1 Like

My bad, you’re right, it doesn’t work with SVGs.

1 Like

This article is worth a look.

1 Like

Thanks!! I will take a look :slight_smile:

1 Like

Here’s the code needed to nuke the aspect ratio.

.stretched-logo-bg {
    background: url("../img/curve.svg#svgView(preserveAspectRatio(none))") center center no-repeat;
    background-size: 100% 100%;
1 Like

Thank you so much Vincent!! I will try this out!

Hi there,

thats a good solution from vincent there. But I had a case, where this would be very annoying due to some reasons. I found out theres a different approach:

You can open up your SVG in an text editor (Sublime, etc) and hardcode it it directly into your SVG’s.

1. First step, find:
svg width="207px" height="43px"

and change to
svg width="100%" height="100%"

2. Second step, add the attribute preserveAspectRatio=“none” just after width and height as here:
width="100%" height="100%" preserveAspectRatio="none"

3. Third step:
Make your SVG a background image with “cover”

Hope this help :wink:

1 Like

This is golden. Thank you so much!

Amazing Help! Thank you so much

thanks @vincent and ianm, this is extremely useful!! Just the answer I was looking for today :slightly_smiling_face:

1 Like