SVG as background image to fill entire container
Hi, I’m trying to get this image which was saved as an SVG to fill the entire background, I’ve tried setting the background size to cover/contain but still won’t work.
Here’re the CSS code
.testimonial-section {
background-image: url(images/bg-curve-desktop.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
background-color: orange;
}
Here’s what I get
And here’s what I’m trynna achieve
16 Replies
What does the svg code look like?
See link for why
Stack Overflow
Background cover is not working correctly
I have a problem : the svg bar isnt responsive (see picture), anyone maybe has a solution for that? I seriously searched for around 1 1/2 hour now and im getting really frustrated :/
Here is my co...
@croganm it’s a picture and not really a code. It’s a challenge from frontendmentor
SVG is actually code if you open it in your editor (whether VSCode or whatever) 🙂
^
I understand you but I mean this one came in a form of an image just like icons and illustration pictures
You wouldn't be able to open it at all in an editor? I mean I know they are images but they're images made up out of code and everything. It's how we can edit them. The issue is that a lot of SVG's have built in height and widths on them, which makes them pretty inflexible for situations like background images.
We would just likely need to delete those attributes and replace it with a
viewBox attribute if none exists
This way we can morph itOh, I’ll need you to share and example if you don’t mind, cause it’s really making me think tirelessly
So this image
Really is just the following code:
Notice that width and height attribute? You can usually ignore that, but for background images, it's a bit tougher
If we delete those attributes, you can size it according to whatever and the SVG will adjust
Also, if you don't mind me asking, what's the exact image you're having issues with. I see that orange and blue in your example that's not in the version you're trying to recreate
I’m trynna recreate the one with the plain white color but I just don’t know how to go about this cause the image didn’t come with any SVG code , it only came just like a normal photo would, just like an illustration also. Sorry if I’m stressing you out and I appreciate the fact that you trynna help out
Yea no problem at all. Do you have an example of the site you could show? I know it's a frontend mentor challenge as I've done them myself, but could you drag the folder into this site and send the link?
https://app.netlify.com/drop/do
Netlify App
Start building the best web experiences in record time
Okay thank, will do that right now
I am facing the same issue, but I haven't found a solution for it yet. If you have managed to resolve it, could you please share how you handled it? Thanks!
Yes, I helped him solve it via DM. Unless you have exactly the same project and the exact same problem, I'd recommend creating a new post or DMing me
This was a specific case
Okay..
I will send you a direct message.