CODEWITHSUNDEEP
htmlcssimage
Vikram Sharma
Vikram Sharma

Reputation: 310

Remove the background of an image in Css

I have a logo, which is not of rectangular or square shaped. I have removed the background of the image. But when i try to write a class in css, it shows the background as white, since the class itself comes as squared or rectangular.

.logo1{
	max-height: 100%;
	max-width: 100%;
	width:150px;
	height:150px;
	background-size: cover;
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/72/Santipur_B.Ed_College_Logo.png');
	float: left;
}
<div class="logo1"> </div>

Right now the background is white, so it feels correct. But when the background color is something else, a square white box is shown around the image. I want to remove that square white box around the logo.

Upvotes: 0

Views: 64099

Answers (5)

rupal lonare
rupal lonare

Reputation: 1

. logo1{
        filter: invert (100%).
    }

if logo/image is black then it will turn into white and white will turn into black. it works 100%

Upvotes: 0

ASh
ASh

Reputation: 71

Maybe you are looking for :

.logo1 {  
   mix-blend-mode:multiply;

  }

Or

.logo1 {  
    mix-blend-mode:darken;

   }

Upvotes: 6

Rohit Sharma
Rohit Sharma

Reputation: 3334

It is looking good here. Make sure the image is in png format where you are using it and has background transparent. 

body {background: #ff0;}
.logo1{
	max-height: 100%;
	max-width: 100%;
	width:150px;
	height:150px;
	background-size: cover;
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/72/Santipur_B.Ed_College_Logo.png');
	float: left;
}
<div class="logo1"> </div>

Upvotes: 3

JFC
JFC

Reputation: 586

Background transparent is what you're looking for.

body {
  background: orange;
}

.logo1 {
  max-height: 100%;
  max-width: 100%;
  width: 150px;
  height: 150px;
  border: 1px solid;
  background: url('https://upload.wikimedia.org/wikipedia/commons/7/72/Santipur_B.Ed_College_Logo.png') no-repeat scroll center center transparent;
  background-size: cover;
  float: left;
}
<div class="logo1"> </div>

Upvotes: 1

ajax992
ajax992

Reputation: 996

Try setting the background color:

background-color: rgba(0,0,0,0);

OR

background-color: transparent;

See if that works.

Upvotes: 0

Related Questions