Increase background image size by px or % and negative spacing

[toolman]

Hi there,

I have a background image SVG with the following code:

#stunning-header .crumina-heading-background {
    background: #4adcc5 url(images/logo-bg.svg) no-repeat left center;

What I would like to do is have the background image increased in size, either by px or % and also have it positioned negatively on the top and bottom so it appears cut off a little.

How can I so this? I have tried increasing the background-size but using % %, but not having much luck.

Any suggestions would be great.

This is what I am trying to acheive:

rather than:

Thanks

[coothead]

Hi there toolman,

if you were to provide members here with your
logo-bg.svg file, it would definitely give them
a much better chance of solving your problem.

coothead

[toolman]

Hi,

Sure, attached is logo-bg.zip (648 Bytes) the SVG.

[coothead]

Hi there toolman,

here is one basic example…

https://codepen.io/coothead/full/dyogevw

…and the code used…

https://codepen.io/coothead/pen/dyogevw

coothead

[toolman]

Hi coothead,

Many thanks for the example. it looks good I will have a play around with it as I am trying to get the main green/turquoise background to be 100% width.