Incorporating a transparent icon onto an HTML background

I'm struggling to place a transparent white envelope icon on a green background. I don't understand why it's not working, especially when the telephone icon worked fine.

Side Question.: Any recommendations for how to add something above the header using HTML? I designed the logo and navigation bar in the header, but trying to add phone and email info on top is causing style issues.

https://i.sstatic.net/wpRAt.jpg

I've attempted using 10 different images, but none seem to be successful.

´´´


    <aside class="phone">
        <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6c7f637a7c6c4f68626e6663216c6062">[email protected]</a>"><img src="../C&C/img/kisspng-paper-black-and-white-envelope-5a7b1ac9f163b2.4908982415180172259887.jpg" width="18" height="18"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6c60617b6e6b607d4f68626e6663216c6062">[email protected]</a></a><a href="tel:+1-303-499-7111"><img src="../C&C/img/Call-Icon.png" width="18" height="18"> (303) 499-7111</a>
    </aside>


    <header>
        <div class="containerHeader">
          <div id="Branding">
            <img src="./img/logo.png.png">
          </div>
          <nav>
              <ul>
                  <li class="current"><a href="index.html">Home</a></li> <!––Current makes the current page have a different colour-->
                  <li><a href="quemsomos.html">Quem somos?</a></li>
                  <li><a href="services.html">Serviços</a></li>
              </ul>
          </nav>                        
        </div> 

    </header>

´´´

javascripthtmlcss

Answer №1

It appears that your envelope icon is in a .jpg format, which unfortunately does not support transparency. On the other hand, your telephone icon is in .png format. To achieve transparency for your icons, I recommend exploring websites such as findicons.com or flaticon.com

Answer №2

When inserting the Envelope image, make sure it is in .jpg format. Consider saving it as a .png file for better quality.

Jpg files do not support transparency, so switching to .png can be beneficial.

Cheers!

Answer №3

When using JPG images, transparency is not supported. The second icon displays correctly because it is a PNG image, which does support transparency. It would be best to use a PNG image for the envelope icon as well.

Answer №4

Unfortunately, I attempted to use several different png images but none of them seemed to work. Disappointing!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enable search functionality for jQuery Select2 values that have been formatted by a formatter function

Trying to use a formatter with select2 for better alignment of code and description elements, but the plugin seems to be searching based only on the description rather than the entire text. This may be because it's only looking at the original <opt ...

javascriptjqueryjquery-select2

Converting a JavaScript hash into a single object: A step-by-step guide

I have an array of objects in the following format: var log=[ { billkey:"Name", billvalue:"ABC" }, { billkey:"Department", billvalue:"Computer" }]; and I want to convert it into a single object like this: var log={ "Name":"ABC", " ...

javascriptarraysobject

Guide on using a while-loop in selenium with python to continuously run until a specific element is no longer present on the page

I'm currently facing a challenge with creating a while-loop that will run until a specific element is no longer present on a website. My existing solution gets the job done, but I know there's room for improvement. I would love to hear suggestion ...

pythonhtmlseleniumselenium-webdriver

Creating an Edit and Delete feature for a looped textbox in JavaScript

Exploring the realm of web development, I am on a mission to integrate an add/edit/delete feature to manipulate form values using Javascript. Let me shed some light on what I aim to achieve. Within my codebase, there exists a loop that sequentially displa ...

javascriptc#jquery

Ways to adjust the color of a cell in a table

I am working on customizing a table in my website where I need to change the color of a single cell in each row, similar to the example shown in this image: https://i.sstatic.net/1wtit.jpg Here is the HTML code that I have implemented so far: < ...

javascripthtmlhtml-table

Retrieve the HTML value of an element in Vue.js by clicking on its adjacent element

Hey there, I'm currently working on a simple notes app and I've hit a roadblock with one particular feature. In my project, I have a card element with a delete button as a child. What I need to achieve is to check if the value of the .card-title ...

javascriptjqueryhtmlvue.jsvuejs2

CSS is functioning properly on a local level, but fails to take effect once the "npm run build" command is executed in the React application's build

I am attempting to override the CSS of Muidrawer-paper. It works locally after running "npm start", but it does not take effect when building the package. .css-12i7wg6-MuiPaper-root-MuiDrawer-paper { position: absolute !important; top: 50px !import ...

cssreactjsmaterial-ui

The request for the URL (https://deno.land/std/encoding/csv.ts) could not be sent due to an operating system error with code 100

Encountering an issue with importing the stdlib files from deno.land to the local cache when running mod.ts. Error: error sending request for url (): error trying to connect: tcp connect error: An attempt was made to access a socket in a way forbidden by ...

javascriptdeno

Creating a balanced height for child elements using CSS

If you are looking to display a list of colors with each color occupying an equal fraction of the height, here is how you can achieve it. Imagine presenting four colors in a list with a fixed height and a thick border around it: The example shown above is ...

csswebkit

Send a request to templateUrl

After experimenting with AngularJS, I decided to create a dynamic route system that funnels all routes through a single PHP file. This was motivated by my desire to prevent users from accessing raw templateUrl files and seeing unstyled partial pages. Prio ...

javascriptajaxangularjs

Upon clicking, the input texts revert to their original default values

I have a form below that is working as intended, except for one issue. When I click the 'Add' link, the texts in all the textboxes revert to their default values, as shown in the images. How can I resolve this problem? Thank you. before click: ...

javascripthtml

Crafting personalized objects from an array

In the process of creating an object from an array, I am faced with a dilemma. The elements in the array are as follows: var arr = [ 'find({ qty: { $lt: 20 } } )', 'limit(5)', 'skip(0)' ] Despite my efforts, my code is ...

javascriptarraysjsonnode.js

Are memory leaks a common issue with Angular directives?

Using a simple html file to replicate a memory leak: <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script> <script> va ...

javascriptangularjsmemory-leaks

Can you explain the contrast between EJS's render() function and renderFile() method?

const express = require('express'); const ejs = require('ejs'); const app = express(); app.engine('ejs', ejs.renderFile); app.get('/', (req, res) => { res.render('index.ejs', { ...

javascriptnode.jsexpressejs

JavaScript timing the completion of AJAX requests

I'm working on a basic ajax request using js and php to fetch data from mysql. Check out the code snippet below: function ajax_function(a,b) { $.ajax({ type : 'POST', url : mine.ajax_url, dataType : 'json&ap ...

javascriptjqueryajaxprogress-bar

Guide to filling a dropdown menu by aligning with the text it contains?

I've set up two dropdown select boxes below that are exactly the same: HTML <select id="ddl1" name="ddl1"> <option value="1">TEXT 1</option> <option value="2">TEXT 2</option> <option value="3">TEXT 3&l ...

javascriptjqueryhtmldrop-down-menucombobox

Using VueJS to switch classes on multiple cards

There is a page with multiple cards, each containing its own set of status radio buttons: ok, missing, error. The goal is to be able to change the status of individual cards without affecting others. A method was created to update the class on the @change ...

javascriptvue.js

Looking for assistance with HTML regex (even though I understand it's not the recommended approach)

Before we dive in, let me just say that I'm using this regex to work around a bug while waiting for the server team to address it. The issue is that I'm receiving JSON with unescaped " characters within HTML. I need a regex that can identify the ...

htmlregexjson

Tips on how to hold off the display of webpage content until all elements, including scripts and styles, have fully loaded

I have a variety of div elements set up like this - <div id='1' class='divs_nav'>My Dynamic Content</div> <div id='2' class='divs_nav'>My Dynamic Content</div> ... <div id='149' c ...

javascriptjqueryhtml

What could be causing the error where axios.get is not functioning properly?

Recently, I embarked on a journey to familiarize myself with working with packages and npm. My first step was to import axios for a simple http request. Initially, I set up the project using npm init successfully. However, I encountered my first roadbloc ...

javascriptnode.jsnpmnpm-install