SVG Background stretch

Design help General
1

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.

Thanks!

1 Like
2

Yes, not only with SVG but with all formats.

http://vincent.polenordstudio.fr/snap/19dahww.jpg

1 Like
3

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

48
482674×1160 284 KB

1 Like
4

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

1 Like
5

This article is worth a look.

1 Like
6

Thanks!! I will take a look :slight_smile:

1 Like
7

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
8

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

9

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”
56

Hope this help :wink:

4 Likes
10

This is golden. Thank you so much!

11

Amazing Help! Thank you so much

12

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

1 Like
13

Great!! Thanks, works like a charm :slight_smile:

14

this is literally a live-saver! thank you so much!