Full width column with background image SVG wrong scaling - Support

Tagged: scaling, svg

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts

October 6, 2021 at 10:40 am #1323735

hammerseo

Participant

Good morning enfold team,

i am trying to place a SVG as background image, but it doesn’t scale right.

First I used a color section and it didn’t work. Then i have read here on the forum to use a grid row, but it stlil does not work.

So i tried just placing a media element with the SVG, it worked and suddenly both images scaled right. Then I display:none the media element hoping the background-image would still scale right, but it just went back to the wrong scaling as soon as the media element was not visible anymore. Now when i remove display:none both are being shown right, when i remove the media element or display:none it the background-image scaling is wrong.

Can you help me on this?

Best regards

This topic was modified 3 years, 1 month ago by hammerseo.

October 6, 2021 at 12:13 pm #1323755

Guenni007

Participant

First, do you have the latest version of enfold installed?
Is there an example page where i can see the issue.
On a testpage i can not reproduce it: https://consulting.webers-testseite.de/hammerseo/

October 6, 2021 at 12:34 pm #1323759

hammerseo

Participant

Hi Guenni,

<svg version="1.1" id="Ebene_2" xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1619.9 735.2" style="enable-background:new 0 0 1619.9 735.2;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#F3D569;}
	.st1{fill:#F3D569;}
	.st2{fill:#FFFFFF;}
	.st3{display:none;fill:#FDF8E6;}
</style>
<polyline class="st0" points="0,436.5 90.6,339.4 145.6,388 211.7,325.4 282.6,335.3 339.6,285.9 349.6,250.4 434.6,266.4   479.6,237.4 494.6,212.6 553.6,201.7 615.6,201.7 658.6,184.7 689.6,211.6 723.6,205.7 771.6,174.7 834.9,140.7 883.6,87.8   966.6,70.7 982.6,97.7 987.6,80.7 1056.8,97.7 1093.7,58.7 1181.7,36.2 1227.7,58.7 1270.7,36.2 1318.7,53.1 1380.3,58.7   1397.3,51.9 1444.3,34 1542.3,31.8 1628.6,0 "/>
<g>
	<path class="st1" d="M90.6,344.4c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9   C95.5,342.1,93.3,344.4,90.6,344.4z"/>
	<path class="st2" d="M90.6,335.5c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S88.4,335.5,90.6,335.5    M90.6,333.5c-3.3,0-5.9,2.7-5.9,5.9c0,3.3,2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9C96.5,336.1,93.8,333.5,90.6,333.5L90.6,333.5z"/>
</g>
<g>
	<path class="st1" d="M145.6,393.3c-2.7,0-4.9-2.2-4.9-4.9s2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9S148.3,393.3,145.6,393.3z"/>
	<path class="st2" d="M145.6,384.4c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S143.4,384.4,145.6,384.4    M145.6,382.4c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S148.8,382.4,145.6,382.4L145.6,382.4z"/>
</g>
<g>
	<path class="st1" d="M210.9,330.3c-2.7,0-4.9-2.2-4.9-4.9s2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9S213.7,330.3,210.9,330.3z"/>
	<path class="st2" d="M210.9,321.4c2.2,0,3.9,1.8,3.9,3.9c0,2.2-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9   C207,323.2,208.8,321.4,210.9,321.4 M210.9,319.4c-3.3,0-5.9,2.7-5.9,5.9c0,3.3,2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9   C216.9,322.1,214.2,319.4,210.9,319.4L210.9,319.4z"/>
</g>
<g>
	<path class="st1" d="M282.6,340.3c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9   C287.5,338.1,285.3,340.3,282.6,340.3z"/>
	<path class="st2" d="M282.6,331.4c2.2,0,3.9,1.8,3.9,3.9c0,2.2-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9   C278.6,333.2,280.4,331.4,282.6,331.4 M282.6,329.4c-3.3,0-5.9,2.7-5.9,5.9c0,3.3,2.7,5.9,5.9,5.9c3.3,0,5.9-2.7,5.9-5.9   C288.5,332.1,285.8,329.4,282.6,329.4L282.6,329.4z"/>
</g>
<g>
	<path class="st1" d="M340.6,290.5c-2.7,0-4.9-2.2-4.9-4.9s2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9S343.3,290.5,340.6,290.5z"/>
	<path class="st2" d="M340.6,281.6c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S338.4,281.6,340.6,281.6    M340.6,279.6c-3.3,0-5.9,2.7-5.9,5.9c0,3.3,2.7,5.9,5.9,5.9c3.3,0,5.9-2.7,5.9-5.9C346.6,282.3,343.9,279.6,340.6,279.6   L340.6,279.6z"/>
</g>
<g>
	<path class="st1" d="M349.6,256c-2.7,0-4.9-2.2-4.9-4.9s2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9S352.3,256,349.6,256z"/>
	<path class="st2" d="M349.6,247.1c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S347.4,247.1,349.6,247.1    M349.6,245.1c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9c3.3,0,5.9-2.7,5.9-5.9S352.8,245.1,349.6,245.1L349.6,245.1z"/>
</g>
<g>
	<path class="st1" d="M434.6,271.3c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9   C439.5,269.1,437.3,271.3,434.6,271.3z"/>
	<path class="st2" d="M434.6,262.4c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9S432.4,262.4,434.6,262.4 M434.6,260.4   c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S437.8,260.4,434.6,260.4L434.6,260.4z"/>
</g>
<g>
	<path class="st1" d="M479.6,242.9c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9   C484.5,240.7,482.3,242.9,479.6,242.9z"/>
	<path class="st2" d="M479.6,234c2.2,0,3.9,1.8,3.9,3.9c0,2.2-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9   C475.6,235.8,477.4,234,479.6,234 M479.6,232c-3.3,0-5.9,2.7-5.9,5.9c0,3.3,2.7,5.9,5.9,5.9c3.3,0,5.9-2.7,5.9-5.9   C485.5,234.7,482.8,232,479.6,232L479.6,232z"/>
</g>
<g>
	<path class="st1" d="M494.6,217.8c-2.7,0-4.9-2.2-4.9-4.9s2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9S497.3,217.8,494.6,217.8z"/>
	<path class="st2" d="M494.6,208.9c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S492.4,208.9,494.6,208.9    M494.6,206.9c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9c3.3,0,5.9-2.7,5.9-5.9S497.8,206.9,494.6,206.9L494.6,206.9z"/>
</g>
<g>
	<path class="st1" d="M553.6,206.6c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9   C558.5,204.4,556.3,206.6,553.6,206.6z"/>
	<path class="st2" d="M553.6,197.7c2.2,0,3.9,1.8,3.9,3.9c0,2.2-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9   C549.6,199.4,551.4,197.7,553.6,197.7 M553.6,195.7c-3.3,0-5.9,2.7-5.9,5.9c0,3.3,2.7,5.9,5.9,5.9c3.3,0,5.9-2.7,5.9-5.9   C559.5,198.4,556.8,195.7,553.6,195.7L553.6,195.7z"/>
</g>
<g>
	<path class="st1" d="M615.6,206.6c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9   C620.5,204.4,618.3,206.6,615.6,206.6z"/>
	<path class="st2" d="M615.6,197.7c2.2,0,3.9,1.8,3.9,3.9c0,2.2-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9   C611.6,199.4,613.4,197.7,615.6,197.7 M615.6,195.7c-3.3,0-5.9,2.7-5.9,5.9c0,3.3,2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9   C621.5,198.4,618.8,195.7,615.6,195.7L615.6,195.7z"/>
</g>
<g>
	<path class="st1" d="M657.5,189.8c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9   C662.5,187.6,660.2,189.8,657.5,189.8z"/>
	<path class="st2" d="M657.5,180.9c2.2,0,3.9,1.8,3.9,3.9c0,2.2-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9   C653.6,182.7,655.3,180.9,657.5,180.9 M657.5,178.9c-3.3,0-5.9,2.7-5.9,5.9c0,3.3,2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9   C663.5,181.6,660.8,178.9,657.5,178.9L657.5,178.9z"/>
</g>
<g>
	<circle class="st1" cx="689.6" cy="211.6" r="4.9"/>
	<path class="st2" d="M689.6,207.7c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9S687.4,207.7,689.6,207.7 M689.6,205.7   c-3.3,0-5.9,2.7-5.9,5.9c0,3.3,2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9C695.5,208.3,692.8,205.7,689.6,205.7L689.6,205.7z"/>
</g>
<g>
	<circle class="st1" cx="722.5" cy="205.6" r="4.9"/>
	<path class="st2" d="M722.5,201.6c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9S720.3,201.6,722.5,201.6 M722.5,199.6   c-3.3,0-5.9,2.7-5.9,5.9c0,3.3,2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9C728.5,202.3,725.8,199.6,722.5,199.6L722.5,199.6z"/>
</g>
<g>
	<path class="st1" d="M835.9,145.6c-2.7,0-4.9-2.2-4.9-4.9s2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9S838.6,145.6,835.9,145.6z"/>
	<path class="st2" d="M835.9,136.7c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9S833.7,136.7,835.9,136.7 M835.9,134.7   c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S839.2,134.7,835.9,134.7L835.9,134.7z"/>
</g>
<g>
	<path class="st1" d="M883.6,92.8c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9   C888.5,90.6,886.3,92.8,883.6,92.8z"/>
	<path class="st2" d="M883.6,83.9c2.2,0,3.9,1.8,3.9,3.9c0,2.2-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9C879.6,85.7,881.4,83.9,883.6,83.9    M883.6,81.9c-3.3,0-5.9,2.7-5.9,5.9c0,3.3,2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9C889.5,84.6,886.8,81.9,883.6,81.9L883.6,81.9z"/>
</g>
<g>
	<path class="st1" d="M966.6,75.4c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9   C971.5,73.2,969.3,75.4,966.6,75.4z"/>
	<path class="st2" d="M966.6,66.5c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9S964.4,66.5,966.6,66.5 M966.6,64.5   c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S969.8,64.5,966.6,64.5L966.6,64.5z"/>
</g>
<g>
	<path class="st1" d="M982.6,100.7c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9   C987.5,98.5,985.3,100.7,982.6,100.7z"/>
	<path class="st2" d="M982.6,91.8c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9S980.4,91.8,982.6,91.8 M982.6,89.8   c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S985.8,89.8,982.6,89.8L982.6,89.8z"/>
</g>
<g>
	<path class="st1" d="M987.6,84.9c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9c2.7,0,4.9,2.2,4.9,4.9   C992.5,82.7,990.3,84.9,987.6,84.9z"/>
	<path class="st2" d="M987.6,76c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9S985.4,76,987.6,76 M987.6,74   c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S990.8,74,987.6,74L987.6,74z"/>
</g>
<g>
	<path class="st1" d="M1056.8,100.7c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9s4.9,2.2,4.9,4.9   C1061.7,98.5,1059.5,100.7,1056.8,100.7z"/>
	<path class="st2" d="M1056.8,91.8c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S1054.6,91.8,1056.8,91.8    M1056.8,89.8c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S1060,89.8,1056.8,89.8L1056.8,89.8z"/>
</g>
<g>
	<path class="st1" d="M1093.7,63.6c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9s4.9,2.2,4.9,4.9   C1098.7,61.4,1096.5,63.6,1093.7,63.6z"/>
	<path class="st2" d="M1093.7,54.7c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S1091.6,54.7,1093.7,54.7    M1093.7,52.7c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S1097,52.7,1093.7,52.7L1093.7,52.7z"/>
</g>
<g>
	<path class="st1" d="M1181.7,41.2c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9s4.9,2.2,4.9,4.9   C1186.7,39,1184.5,41.2,1181.7,41.2z"/>
	<path class="st2" d="M1181.7,32.3c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S1179.6,32.3,1181.7,32.3    M1181.7,30.3c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S1185,30.3,1181.7,30.3L1181.7,30.3z"/>
</g>
<g>
	<path class="st1" d="M1227.7,63.6c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9s4.9,2.2,4.9,4.9   C1232.7,61.4,1230.5,63.6,1227.7,63.6z"/>
	<path class="st2" d="M1227.7,54.7c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S1225.6,54.7,1227.7,54.7    M1227.7,52.7c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S1231,52.7,1227.7,52.7L1227.7,52.7z"/>
</g>
<g>
	<path class="st1" d="M1270.7,41.2c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9s4.9,2.2,4.9,4.9   C1275.7,39,1273.5,41.2,1270.7,41.2z"/>
	<path class="st2" d="M1270.7,32.3c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S1268.6,32.3,1270.7,32.3    M1270.7,30.3c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S1274,30.3,1270.7,30.3L1270.7,30.3z"/>
</g>
<g>
	<path class="st1" d="M1318.7,57.9c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9s4.9,2.2,4.9,4.9   C1323.7,55.7,1321.5,57.9,1318.7,57.9z"/>
	<path class="st2" d="M1318.7,49c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S1316.6,49,1318.7,49 M1318.7,47   c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S1322,47,1318.7,47L1318.7,47z"/>
</g>
<g>
	<path class="st1" d="M1380.3,63.6c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9s4.9,2.2,4.9,4.9   C1385.2,61.4,1383,63.6,1380.3,63.6z"/>
	<path class="st2" d="M1380.3,54.7c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S1378.1,54.7,1380.3,54.7    M1380.3,52.7c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S1383.6,52.7,1380.3,52.7L1380.3,52.7z"/>
</g>
<g>
	<circle class="st1" cx="1443.2" cy="33.4" r="4.9"/>
	<path class="st2" d="M1443.2,29.4c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S1441.1,29.4,1443.2,29.4    M1443.2,27.4c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S1446.5,27.4,1443.2,27.4L1443.2,27.4z"/>
</g>
<g>
	<circle class="st1" cx="1543.3" cy="32.3" r="4.9"/>
	<path class="st2" d="M1543.3,28.3c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9c-2.2,0-3.9-1.8-3.9-3.9S1541.1,28.3,1543.3,28.3    M1543.3,26.3c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S1546.6,26.3,1543.3,26.3L1543.3,26.3z"/>
</g>
<g>
	<path class="st1" d="M771.6,179.1c-2.7,0-4.9-2.2-4.9-4.9c0-2.7,2.2-4.9,4.9-4.9s4.9,2.2,4.9,4.9   C776.5,176.9,774.3,179.1,771.6,179.1z"/>
	<path class="st2" d="M771.6,170.2c2.2,0,3.9,1.8,3.9,3.9s-1.8,3.9-3.9,3.9s-3.9-1.8-3.9-3.9S769.4,170.2,771.6,170.2 M771.6,168.2   c-3.3,0-5.9,2.7-5.9,5.9s2.7,5.9,5.9,5.9s5.9-2.7,5.9-5.9S774.8,168.2,771.6,168.2L771.6,168.2z"/>
</g>
<rect y="0.5" class="st3" width="1619.6" height="734.8"/>
</svg>

October 6, 2021 at 12:48 pm #1323761

Guenni007

Participant

width and height : auto is not a working style in svgs.
https://css-tricks.com/scale-svg/

then as mentioned befor in another topic – rename the classes – because Illustrator always use “st” – but if you have more than 1 svg on that page the last one in DOM decides the style of that classes ( st1 etc)

try to use :

… depends on how the svg should react on shrinking/expanding. – but we have no inline svg here – so there are two settings to make
for the background-image a quick css f.e.:
background-size: 100% 100% !important; see example page again.
on top this svg:

by the way: this is an excellent svg optimizer: https://jakearchibald.github.io/svgomg/

try this svg instead:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="haseo_curve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 1500 400" style="enable-background:new 0 0 1500 400;" preserveAspectRatio="xMinYMid meet" xml:space="preserve">
<style type="text/css">
	.haseo0{fill:none;stroke:#F3D569;stroke-width:0.3704;stroke-miterlimit:1.4816;}
	.haseo1{fill:#F3D569;}
	.haseo2{fill:#FFFFFF;}
</style>
<g>
	<path class="haseo0" d="M0,400l83.4-89l50.7,44.5l60.9-57.4l65.3,9.1l52.5-45.3l9.2-32.5l78.3,14.7l41.4-26.6l13.8-22.7l54.3-10H567
		l39.6-15.6l28.6,24.7l31.3-5.4l44.2-28.4l58.3-31.2l44.9-48.5l76.4-15.7L905,89.5l4.6-15.6l63.7,15.6l34-35.7l81.1-20.6l42.4,20.6
		l39.6-20.6l44.2,15.5l56.7,5.1l15.7-6.2l43.3-16.4l90.3-2L1500,0"/>
	<path class="haseo1" d="M83.4,315.6c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5C88,313.5,85.9,315.6,83.4,315.6z"/>
	<path class="haseo2" d="M83.4,307.4c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6S81.4,307.4,83.4,307.4 M83.4,305.6
		c-3,0-5.4,2.5-5.4,5.4c0,3,2.5,5.4,5.4,5.4c2.9,0,5.4-2.5,5.4-5.4C88.9,308,86.4,305.6,83.4,305.6z"/>
	<path class="haseo1" d="M134.1,360.4c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5
		C138.6,358.4,136.6,360.4,134.1,360.4z"/>
	<path class="haseo2" d="M134.1,352.3c2,0,3.6,1.6,3.6,3.6c0,1.9-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6
		C130.5,353.9,132.1,352.3,134.1,352.3 M134.1,350.4c-3,0-5.4,2.5-5.4,5.4c0,2.9,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4
		C139.5,352.9,137.1,350.4,134.1,350.4z"/>
	<path class="haseo1" d="M194.2,302.7c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5S196.8,302.7,194.2,302.7z"/>
	<path class="haseo2" d="M194.2,294.5c2,0,3.6,1.6,3.6,3.6c0,2-1.7,3.6-3.6,3.6c-1.9,0-3.6-1.6-3.6-3.6S192.3,294.5,194.2,294.5
		 M194.2,292.7c-3,0-5.4,2.5-5.4,5.4c0,3,2.5,5.4,5.4,5.4c2.9,0,5.4-2.5,5.4-5.4C199.8,295.2,197.3,292.7,194.2,292.7z"/>
	<path class="haseo1" d="M260.3,311.8c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5s4.5,2,4.5,4.5S262.8,311.8,260.3,311.8z"/>
	<path class="haseo2" d="M260.3,303.7c2,0,3.6,1.6,3.6,3.6c0,2-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6
		C256.6,305.3,258.3,303.7,260.3,303.7 M260.3,301.9c-3,0-5.4,2.5-5.4,5.4c0,3,2.5,5.4,5.4,5.4c3,0,5.4-2.5,5.4-5.4
		S263.2,301.9,260.3,301.9z"/>
	<path class="haseo1" d="M313.7,266.2c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5S316.2,266.2,313.7,266.2z"/>
	<path class="haseo2" d="M313.7,258.1c2,0,3.6,1.6,3.6,3.6c0,1.9-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6
		C310.1,259.7,311.7,258.1,313.7,258.1 M313.7,256.2c-3,0-5.4,2.5-5.4,5.4c0,3,2.5,5.4,5.4,5.4c3,0,5.4-2.5,5.4-5.4
		C319.2,258.7,316.7,256.2,313.7,256.2z"/>
	<path class="haseo1" d="M322,234.6c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5C326.5,232.6,324.5,234.6,322,234.6z"/>
	<path class="haseo2" d="M322,226.4c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6S320,226.4,322,226.4 M322,224.6
		c-3,0-5.4,2.5-5.4,5.4c0,2.9,2.5,5.4,5.4,5.4c3,0,5.4-2.5,5.4-5.4C327.4,227.1,324.9,224.6,322,224.6z"/>
	<path class="haseo1" d="M400.3,248.6c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5s4.5,2,4.5,4.5S402.8,248.6,400.3,248.6z"/>
	<path class="haseo2" d="M400.3,240.5c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6c-1.9,0-3.6-1.6-3.6-3.6S398.3,240.5,400.3,240.5
		 M400.3,238.6c-3,0-5.4,2.5-5.4,5.4s2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4S403.2,238.6,400.3,238.6z"/>
	<path class="haseo1" d="M441.7,222.6c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5s4.5,2,4.5,4.5S444.2,222.6,441.7,222.6z"/>
	<path class="haseo2" d="M441.7,214.4c2,0,3.6,1.6,3.6,3.6c0,2-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6
		C438,216.1,439.7,214.4,441.7,214.4 M441.7,212.6c-3,0-5.4,2.5-5.4,5.4c0,3,2.5,5.4,5.4,5.4c3,0,5.4-2.5,5.4-5.4
		S444.7,212.6,441.7,212.6z"/>
	<path class="haseo1" d="M455.5,199.6c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5C460.1,197.6,458,199.6,455.5,199.6z"/>
	<path class="haseo2" d="M455.5,191.4c2,0,3.6,1.6,3.6,3.6c0,1.9-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6
		C452,193.1,453.5,191.4,455.5,191.4 M455.5,189.6c-3,0-5.4,2.5-5.4,5.4c0,2.9,2.5,5.4,5.4,5.4c3,0,5.4-2.5,5.4-5.4
		C461,192.1,458.5,189.6,455.5,189.6z"/>
	<path class="haseo1" d="M509.9,189.3c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5
		C514.4,187.3,512.4,189.3,509.9,189.3z"/>
	<path class="haseo2" d="M509.9,181.2c2,0,3.6,1.6,3.6,3.6c0,2-1.7,3.6-3.6,3.6s-3.6-1.6-3.6-3.6C506.2,182.7,507.9,181.2,509.9,181.2
		 M509.9,179.3c-3,0-5.4,2.5-5.4,5.4c0,3,2.5,5.4,5.4,5.4c3,0,5.4-2.5,5.4-5.4C515.3,181.8,512.8,179.3,509.9,179.3z"/>
	<path class="haseo1" d="M567,189.3c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5C571.5,187.3,569.5,189.3,567,189.3z"/>
	<path class="haseo2" d="M567,181.2c2,0,3.6,1.6,3.6,3.6c0,2-1.7,3.6-3.6,3.6s-3.6-1.6-3.6-3.6C563.3,182.7,565,181.2,567,181.2
		 M567,179.3c-3,0-5.4,2.5-5.4,5.4c0,3,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4C572.4,181.8,569.9,179.3,567,179.3z"/>
	<path class="haseo1" d="M605.6,173.9c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5C610.2,171.9,608.1,173.9,605.6,173.9z"
		/>
	<path class="haseo2" d="M605.6,165.8c2,0,3.6,1.6,3.6,3.6c0,2-1.7,3.6-3.6,3.6s-3.6-1.6-3.6-3.6S603.6,165.8,605.6,165.8 M605.6,163.9
		c-3,0-5.4,2.5-5.4,5.4c0,3,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4C611.1,166.4,608.6,163.9,605.6,163.9z"/>
	<ellipse class="haseo1" cx="635.1" cy="193.9" rx="4.5" ry="4.5"/>
	<path class="haseo2" d="M635.1,190.3c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6s-3.6-1.6-3.6-3.6S633.1,190.3,635.1,190.3 M635.1,188.5
		c-3,0-5.4,2.5-5.4,5.4c0,3,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4C640.6,190.9,638.1,188.5,635.1,188.5z"/>
	<ellipse class="haseo1" cx="665.4" cy="188.4" rx="4.5" ry="4.5"/>
	<path class="haseo2" d="M665.4,184.7c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6s-3.6-1.6-3.6-3.6S663.4,184.7,665.4,184.7 M665.4,182.9
		c-3,0-5.4,2.5-5.4,5.4c0,3,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4C671,185.4,668.5,182.9,665.4,182.9z"/>
	<path class="haseo1" d="M769.9,133.4c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5C774.4,131.4,772.4,133.4,769.9,133.4z"
		/>
	<path class="haseo2" d="M769.9,125.3c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6s-3.6-1.6-3.6-3.6S767.9,125.3,769.9,125.3 M769.9,123.4
		c-3,0-5.4,2.5-5.4,5.4s2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4S772.9,123.4,769.9,123.4z"/>
	<g>
		<path class="haseo1" d="M813.8,85c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5C818.3,83,816.3,85,813.8,85z"/>
		<path class="haseo2" d="M813.8,76.9c2,0,3.6,1.6,3.6,3.6c0,2-1.7,3.6-3.6,3.6s-3.6-1.6-3.6-3.6C810.1,78.5,811.8,76.9,813.8,76.9
			 M813.8,75.1c-3,0-5.4,2.5-5.4,5.4c0,3,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4C819.3,77.5,816.8,75.1,813.8,75.1z"/>
	</g>
	<g>
		<path class="haseo1" d="M890.3,69.1c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5C894.8,67.1,892.8,69.1,890.3,69.1z"/>
		<path class="haseo2" d="M890.3,60.9c2,0,3.6,1.6,3.6,3.6c0,1.9-1.7,3.6-3.6,3.6s-3.6-1.6-3.6-3.6C886.7,62.6,888.2,60.9,890.3,60.9
			 M890.3,59.1c-3,0-5.4,2.5-5.4,5.4c0,2.9,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4C895.7,61.6,893.2,59.1,890.3,59.1z"/>
	</g>
	<g>
		<path class="haseo1" d="M905,92.3c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5C909.5,90.3,907.5,92.3,905,92.3z"/>
		<path class="haseo2" d="M905,84.1c2,0,3.6,1.6,3.6,3.6c0,1.9-1.7,3.6-3.6,3.6s-3.6-1.6-3.6-3.6C901.4,85.8,903,84.1,905,84.1
			 M905,82.3c-3,0-5.4,2.5-5.4,5.4c0,2.9,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4C910.4,84.8,908,82.3,905,82.3z"/>
	</g>
	<g>
		<path class="haseo1" d="M909.6,77.8c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5C914.1,75.8,912.1,77.8,909.6,77.8z"/>
		<path class="haseo2" d="M909.6,69.6c2,0,3.6,1.6,3.6,3.6c0,1.9-1.7,3.6-3.6,3.6s-3.6-1.6-3.6-3.6C906,71.3,907.6,69.6,909.6,69.6
			 M909.6,67.8c-3,0-5.4,2.5-5.4,5.4s2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4S912.6,67.8,909.6,67.8z"/>
	</g>
	<g>
		<path class="haseo1" d="M973.4,92.3c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5C977.9,90.3,975.8,92.3,973.4,92.3
			z"/>
		<path class="haseo2" d="M973.4,84.1c2,0,3.6,1.6,3.6,3.6c0,1.9-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6
			C969.8,85.8,971.3,84.1,973.4,84.1 M973.4,82.3c-3,0-5.4,2.5-5.4,5.4c0,2.9,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4
			C978.8,84.8,976.3,82.3,973.4,82.3z"/>
	</g>
	<g>
		<path class="haseo1" d="M1007.3,58.3c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5
			C1011.9,56.3,1009.9,58.3,1007.3,58.3z"/>
		<path class="haseo2" d="M1007.3,50.1c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6S1005.4,50.1,1007.3,50.1
			 M1007.3,48.3c-3,0-5.4,2.5-5.4,5.4c0,2.9,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4C1012.8,50.8,1010.4,48.3,1007.3,48.3z"/>
	</g>
	<g>
		<path class="haseo1" d="M1088.4,37.8c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5C1093,35.7,1091,37.8,1088.4,37.8z"/>
		<path class="haseo2" d="M1088.4,29.6c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6S1086.5,29.6,1088.4,29.6
			 M1088.4,27.8c-3,0-5.4,2.5-5.4,5.4s2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4S1091.4,27.8,1088.4,27.8z"/>
	</g>
	<g>
		<path class="haseo1" d="M1130.8,58.3c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5
			C1135.4,56.3,1133.3,58.3,1130.8,58.3z"/>
		<path class="haseo2" d="M1130.8,50.1c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6S1128.8,50.1,1130.8,50.1
			 M1130.8,48.3c-3,0-5.4,2.5-5.4,5.4c0,2.9,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4C1136.2,50.8,1133.8,48.3,1130.8,48.3z"/>
	</g>
	<g>
		<path class="haseo1" d="M1170.4,37.8c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5C1175,35.7,1172.9,37.8,1170.4,37.8z"/>
		<path class="haseo2" d="M1170.4,29.6c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6S1168.4,29.6,1170.4,29.6
			 M1170.4,27.8c-3,0-5.4,2.5-5.4,5.4s2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4S1173.4,27.8,1170.4,27.8z"/>
	</g>
	<g>
		<path class="haseo1" d="M1214.6,53.1c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5C1219.2,51,1217.1,53.1,1214.6,53.1z"/>
		<path class="haseo2" d="M1214.6,44.9c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6S1212.6,44.9,1214.6,44.9
			 M1214.6,43.1c-3,0-5.4,2.5-5.4,5.4c0,2.9,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4C1220,45.5,1217.6,43.1,1214.6,43.1z"/>
	</g>
	<g>
		<path class="haseo1" d="M1271.3,58.3c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5
			C1275.8,56.3,1273.8,58.3,1271.3,58.3z"/>
		<path class="haseo2" d="M1271.3,50.1c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6S1269.3,50.1,1271.3,50.1
			 M1271.3,48.3c-3,0-5.4,2.5-5.4,5.4c0,2.9,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4C1276.7,50.8,1274.3,48.3,1271.3,48.3z"/>
	</g>
	<g>
		<ellipse class="haseo1" cx="1329.2" cy="30.6" rx="4.5" ry="4.5"/>
		<path class="haseo2" d="M1329.2,26.9c2,0,3.6,1.6,3.6,3.6c0,1.9-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6S1327.3,26.9,1329.2,26.9
			 M1329.2,25.1c-3,0-5.4,2.5-5.4,5.4s2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4S1332.3,25.1,1329.2,25.1z"/>
	</g>
	<g>
		<ellipse class="haseo1" cx="1421.4" cy="29.6" rx="4.5" ry="4.5"/>
		<path class="haseo2" d="M1421.4,25.9c2,0,3.6,1.6,3.6,3.6s-1.7,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6S1419.4,25.9,1421.4,25.9
			 M1421.4,24.1c-3,0-5.4,2.5-5.4,5.4c0,2.9,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4S1424.5,24.1,1421.4,24.1z"/>
	</g>
	<g>
		<path class="haseo1" d="M710.7,164.1c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5s4.5,2,4.5,4.5C715.2,162.1,713.2,164.1,710.7,164.1z"
			/>
		<path class="haseo2" d="M710.7,156c2,0,3.6,1.6,3.6,3.6c0,1.9-1.7,3.6-3.6,3.6s-3.6-1.6-3.6-3.6C707.1,157.6,708.6,156,710.7,156
			 M710.7,154.1c-3,0-5.4,2.5-5.4,5.4c0,2.9,2.5,5.4,5.4,5.4s5.4-2.5,5.4-5.4C716.1,156.6,713.6,154.1,710.7,154.1z"/>
	</g>
</g>
</svg>

and for that color-section :

.page-id-4215 #av_section_1,
.page-id-4215 #av_section_2 {
    background-size: 100% 100% !important;
}

on the bottom with preserveAspectRatio=“none“

October 6, 2021 at 3:35 pm #1323774

hammerseo

Participant

Hi Guenni,

thanks for your answer, afford and the tipps! Unfortunately the problem still persists, even with this custom CSS & preserveAspectRatio = none inside the SVG :/

I tried some things and each result looks different:
– 1/1 row with background image => the SVG is way too small
– color-section with background image => the SVG is now way wider, but still not full width
– grid-row with background image => the SVG is also wider, but cut out at the end and it works only with grid-row margin top & bottom 100px

Furthermore with preserveAspectRatio=”none” the SVG is more displaced than with preserveAspectRatio=”xMinYMid meet” in your SVG Code

I have no idea what to do next

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.