SVG as background
I would like to use a svg for my backgroud, ideally it should kinda scale with the screen too, but that might be to advanced for me.
I have an svg from a horseshoe that I want to crop that it looks like in my figma file.
https://codepen.io/Becii/pen/dygdrqx
I tried using
background-image: url("../../img/Wallner_Logo.svg") no-repeat;
background-size: cover;
but its not even showing up (the path itself is correct tho)
all the YT tutorials I found didn't rly help either
7 Replies
Remove
no-repeat. It's not valid as a background-image property (I think you meant to use it on background), but also with cover repeats aren't possibleWhen something doesn't work it's worth right clicking and inspecting the element to see if there are any problems with the element. You'll see this error for the
background-image that you have
I removed it but still nothing showed up. Its possible tho no? Or should I just make a few different pngs and change them with @media ? I dont know whats "better" tbh ^^
yes, it is definitely possible to use an SVG as a
background-image. Can you throw the CSS you're using in the above codepen? How do you know that the file path is correct if you can't get it to show up?I changed the SVG now and it shows up perfectly, what I dont understand is how to do it without "premaking" it. dunno how to explain ^^
So I made this as an svg:
ofc without the razer thingy that had to pop up while I wass snipping
I would have loved a way where I only ussee the svg logo to make this ^^
like I dont rly care for this project but in the future it would be nice to know ^^
Also I run into the problem that in mobile it repeats itself but instead I would just need it to stay even when scrolling 😮