How to force transparent background for a SVG file?

HTML & CSS
1

I have CSS code to display SVG files. How to force background as transparent or white?

The SVG is already transparent. But SVG files do not contain a background unless one is added in the code or as a shape.

An example:

@media (min-width: 600px) {
  .header1 .logo a, .header1 .logo img {
    background: url(my.svg) left center no-repeat;
    width: 220px;
    height: 75px;
  }
}
2

I assume my.svg has transparent areas but is not totally transparent.

Does this give you a white background in the areas where my.svg is transparent?

background: white url(my.svg) left center no-repeat;

3

Can you show more complete code, such as the HTML?
From tests here an SVG background has transparency where the SVG is transparent, showing the colour of whatever is behind.
I also note you are applying the background to an img element. In most cases the image will obscure its background, unless you have padding and/or transparency in the image.

4

Maybe try adding !important ?

background: url(my.svg) left center no-repeat !important;

:thinking:

5

Use CSS to force transparency:

.header1 .logo a,
.header1 .logo img {
  background-color: transparent; 
  background: url(my.svg) left center no-repeat;
}
6

Thank you for the messages.

So, background can be red based on SVG image?

.header1 .logo a,
.header1 .logo img {
  background-color: red; 
  background: url(my.svg) left center no-repeat;
}
7

You could try:

background: red url(my.svg) left center no-repeat;

The red should show through transparent areas (if any) of your SVG.

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.