Help inserting a PNG image

HTML-CSS
1

Hi there I’m struggling trying to insert an image to a webpage. I have the image displaying however the background of the image is white and I’ve tried with images with clear backgrounds and it is still displaying in a white box. Basically I just want to insert an image to my page without having the white box that encompasses the image and just have only the image overlaid my webpages background colour. I am building my product landing page at the mo. Thanks for the help lads much appreciated!

html

<header id=header>
  <nav id="nav-bar" class="nav-box">
    <ul>
      <li><a href="#" class="nav-link">Features</a></li>
      <li><a href="#" class="nav-link">How it works</a></li>
      <li><a href="#" class="nav-link">Pricing</a></li>
      <li><a href="#"class="nav-link">Contact</a></li>
    </ul>
  </nav>
<h1>Top Quality Prices For Top Quality Organs</h1>
</header>
<body>
  <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
    <legend id="email" for="email">Enter Email Here To Sign Up For Harvestation:</legend>
    <input type="email" name="email" id="email" placeholder="Enter Email Here"><br><br>
    <input type="submit" for="email">
  </form>
  <h1>Features and Benfits</h1>
  <div class="text-placement">
    <img src="https://th.bing.com/th/id/OIP.MJUnn4GIShqLg1hA_2XgwgHaHa?pid=ImgDet&rs=1" alt="doctor">
  <h2>Premium Surgeons</h2>
    <p>Our surgeons are of the highest quality with hundreds of years of experiance combined</p>
    <h2>Fast Payments</h2>
    <p>We pay imidetly prior to surgery your money will be in your account before you go on the operating table. That is our guarantee!</p>
    <h2>Life Guarantee</h2>
    <p>We aim for the highest quality of goods and services and with our Life Guarantee, we guarantee that in the event of any surgical misshap you will be generously compensated in proportion to the damage caused</p>
</body>

CSS

body{
  background-color: #080828;
  color: white;
  text-align: center;
}
#nav-bar{
  text-align:right;
}
a{
  color: white;
  dsiplay: block;
  padding: 20px;
  background color: grey;
}
.nav-box{
  background-color: #080828;
  border: 5px solid #080828;
  border-radius: 100px;
  display: block;
  padding: 5px;
}
li{
  display: inline;
  border-color: orange;
  border-radius: 5px;
  border-style: none solid none solid;
  background-color: grey;
  
}
li:hover{
  background-color: #709080;
  max-height: 1px;
}
input[type=email]{
  width: 25em;
  text-align: center;
  height: 2em;
}

  input[type=submit] {
    width: 10em;  
    height: 3em;
    background-color: #ff0030;
    font-weight: bold;
    border: 1em solid #ff0303;
    border-radius: 1em;
}
input[type=submit]:hover{
  background-color: white;
  font-weight: bold;
  border: 1em solid white;
  border-radius: 1em;
}
legend{
  font-size: 1.1em;
  margin-bottom: 1em;
}
.text-placement{  
  justify-content: center;
  margin: auto;
  text-align: left;
  width: 40%;
}

ps ignore that the image is not in the correct position on the page I just want to get it to get rid of the white first.

2

this is a jpg image tho, not png - jpg images don’t support transparent backgrounds
It may be because of the hosting servide you are using

3

The image doesn’t have an extension. It’s some sort of scripted or dynamic link. In order to use it as an image so it has a transparent background it has to be edited in an image editor, saved as an image (.png), and hosted somewhere in order for it to show up online.

4

okay Ill look around for a png I think the last img I tried using was a png but I was coming up across the same issue. Maybe I was wrong in thinking it was. So if the image is a png if I import into my page using the img function it should just come up transparent automaticly?

5

okay so what youre saying is that I need to host the image myself in order to use it I cant just grab a random link off google images n slap it in for this to work?

6

you can use a random image if it’s a png as you want the transparent background. just make sure it is the link to the image, it ends with .png

7

Not all .png images will have a transparent background. It depends how it was made. The creator may have given it a solid color as a background. The .png extension doesn’t always mean the image is transparent, it means it’s capable of being transparent.

It depends what the link to the image is. If it’s a direct link to the image file it should work. If the link is like the one you shared that’s all garbled and doesn’t have a file extension it’s like that for a reason (protecting it). The reasons for protecting an image vary.

Make sure the image you’re using is free to use. Image search tools in most search engines have options to choose so the results are images the creator welcomes anyone to use for free.

You don’t always need to host it yourself but it’s a good idea to. The external hosting service of the link could go down or have issues, for example.

In general, as web developers we should always create and use our own graphics.

Images that are free or don’t say whether they’re free or not and don’t share who the author is or how to contact them are easy to modify. Print screen, paste it in to an image editor, crop it, edit it to your liking, host your version of it so your version of it loads.

We can get away with not using images on a website at all. CSS can be used to make just about anything look more appealing. If we decide using graphics is what we want to do it’s helpful to learn and know at least a little about image editors, how to create and modify images.

8

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