background-image svg to fill the div

How to get the bkg-img to cover the div completely?

[a0394]

Hi everyone,

i'm trying to create a div with an svg as a background-image, but it doesn't cover the whole div it's assigned to.
Please find below the link:
<snip>

I've also tried background-size: cover; but that basically "zooms" the image, which is not what i'm trying to achieve.
The illustrator artboard where the svg comes from is 4000x4000, so i don't get why the proportions look like this.
I've also fidgeted a bit with the svg code, using an online tool, and messing around with width and height attributes, but to no avail.
Any idea on how i can accomplish that?

Many thanks, have a nice day!

[tangor]

@a0394 ... Welcome to Webmasterworld!

[NickMNS]

@a0934

Any idea on how i can accomplish that?

Yes, most probably. But to do that we need more info. Can you please post the first line of the <svg> tag that includes the width and height settings. It should look something like this:

<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 400 400"
    width="1000"
    height="1000" 
id="mySvg"
class="mySvg">

[a0394]

Hi, thanks for your reply.

Here's what i got:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2004.39 1390.88"><defs><style>.cls-1{fill:none;clip-rule:evenodd;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#c4cccc;}.cls-4{opacity:0.08;}.cls-5{fill:#15120c;}</style><clipPath id="clip-path"><path class="cls-1" d="M2000,1390.88V68.51c0-2-109.52-2. [...]

Hope this can help, thanks again!

[NickMNS]

The code you show looks good, in principal the image should scale to the size of its bounding box. This is because you have viewBox set and no height or width set.

but it doesn't cover the whole div it's assigned to

When you say doesn't cover the whole div do you mean it fills the div in one axis (most likely x-axis) and then leaves a portion of the div below the SVG unfilled?

In that case you need to set parameter preserveAspectRatio. The actual value to set depends on how much you are willing to stretch/squeeze the image into the box. The simplest value to use in your case is "none" which will allow the image to stretch or squeeze in any directions. The end result may look wonky though. The various values and descriptions are shown here:
[developer.mozilla.org...]

Note: You can also use the viewBox setting to "crop" the image. But I suggest trying with the above and if doesn't work out, report back and we will find you another solution.

Let us know if this works for you.

[a0394]

Hi, i noticed only now that the link in the first post has gone missing, here's it again:
<snip>

I need the background-image to cover the width of the div.

Thanks

[edited by: engine at 2:34 pm (utc) on Jan 29, 2020]
[edit reason] Please see Forum Charter [webmasterworld.com...] [/edit]

[NickMNS]

According to the rules of webmaster world you are not allowed to link to your own website. Basically no specifics.

[NickMNS]

Just add preserveAspectRatio="none" to the SVG tag:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2004.39 1390.88" preserveAspectRatio="none">

The result will stretch the topographical contours horizontally. I tested it in my browser and it looks fine.

[a0394]

Hi,

thank you very much, that worked! Just one minor flaw: there's a tiny space on the right side of the div, as shown in the following link (screenshot):
[ibb.co...]
While this is already a major improvement, i'd like to know if it's possible to fix it.
Many thanks!

[NickMNS]

My guess would be that there is a margin set somewhere possibly in the css class for your body tag. If i'm not mistaken it is a default setting. To fix it, in your css file:

body{ margin:0 }

If that doesn't work, you can hack a solution by setting the margin for the div that uses the SVG to a have a negative margin to make up for that gap.

[not2easy]

You have not posted the html for the area where this image appears so I can only suggest that you check your CSS to see whether the <div> containing that .svg (or another element that is a parent of that <div> ) is set to have a margin. If not, then try setting the margin to none for the containing div. If you visit the Forum Charter as suggested by @engine earlier you can see what we need to know so suggestions can be more useful. Guessing produces generic ideas.