How to put logo in Navbar without png square

Kdhere 0
Viewed 35

Using template engine as PUG

Html body

    nav#navbar
        ul.flex-container
          div#logo
              img(src='/static/logo3.png')

enter image description here This is what image logo3.png looks

enter image description here

Can you suggest any css property? Or photoshop tool to do it. Searched but found opacity property which doesn't help.

photoshop navbar image css html
3 Answers

You should use Google for more of these simplest tasks. This is not the right place to ask these type of questions. You can use an online background remover like https://remove.bg to remove backgrounds if you are not familiar with image editing apps. Btw, here's your updated image:

enter image description here

Vivek K.0
  1. We can use background remover online tool as Vivek mention.
  2. We can also do it by using css *Invert which changes white background to black. We can also use contrast and other property for it *Css filter function
#logo img{
    filter: invert(1);
    height: 50px;
     width: 60px;
}

This is result of invert function enter image description here

Thanks everyone who helped me in this!

Kdhere0

Unfortunately this image is not transparent, you can see the gray and white chessboard pattern in the background.

I suggest you should use a photo editing app to select the content and delete everything other than the selection.

userNwPF0
Related