Home > Software design >  background color not appearing behind logo css
background color not appearing behind logo css

Time:03-11

i want to remove the white space behind the logo because the background color is not covering it. i tried using paint to crop the logo but its not neat i tried putting background color behind image not working i want this output enter image description here

my output:

enter image description here

image url: https://www.google.com/imgres?imgurl=https://upload.wikimedia.org/wikipedia/commons/c/c0/COMSATS_new_logo.jpg&imgrefurl=https://commons.wikimedia.org/wiki/File:COMSATS_new_logo.jpg&tbnid=xspWDo9unvGAWM&vet=12ahUKEwj3586ygbj2AhVS8eAKHT2sBSwQMygAegUIARC4AQ..i&docid=Nuuz_7AWjCW4JM&w=770&h=769&q=comsats round logo&ved=2ahUKEwj3586ygbj2AhVS8eAKHT2sBSwQMygAegUIARC4AQ

CodePudding user response:

As noted in the comments, you can't add opacity to a JPG image. You'll need to convert this to a PNG.

CodePudding user response:

Since your logo has a simple circular shape, you could also use a css clip-path

body{
background:#ccc;  
}

.logo-round{
  width:20%;
  height:auto;
  clip-path: circle(42%);
}
<img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/COMSATS_new_logo.jpg/600px-COMSATS_new_logo.jpg" />

 clip-path: circle(42%);

The right percentage value depends on the whitespace/background surrounding the logo – in this case 42% should work pretty fine.

  • Related