CSS Background Not Appearing Despite No Errors Detected

I have a HTML, CSS, and JS application that is functioning with cordova. My goal is to display a WhatsApp icon image on the page using a CSS background image.

Although the image is loaded, it is not being displayed and there are no errors related to forbidden access or the image not being found in the console...

  • I attempted to display the image using <img />, but it was unsuccessful.
  • I tried utilizing the CSS property: 
    background-size: contain !important;
  • I experimented with changing the value of background-position.
  • I tested adding the background-image inline within the css style of the element.
  • I even added text to the <a> element.

Unfortunately, none of these methods were successful!

Below is my code :

.whatsapp-icon {
  background-size: contain;
  border-radius: 5px;
  margin-top: 10px;
  height: 35px;
  width: 35px;
  display: block;
  float: right;
  text-decoration: none;
}
<div class='theDownBar'>
  <a style='background-image: url(img/whatsapp-icon.png);' href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a>
</div>

UPDATED : Included images for clarification

The element is visible and has specified dimensions

https://i.sstatic.net/HLNzL.png

There are no console errors, and the image was successfully loaded when checking the source https://i.sstatic.net/NEeQT.png

htmlcsscordova

Answer №1

Hey there! Your code is actually working perfectly for me, I just made a small adjustment to the image URL. Take a look:

<style>
.whatsapp-icon {
    background-size: contain;
    border-radius: 5px;
    margin-top: 10px;
    height: 35px;
    width: 35px;
    display: block;
    float: right;
    text-decoration: none;
}
</style>

<div class='theDownBar'>
    <a style='background-image:url(https://newimageurl.com/photo.jpg);' href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a>
</div>

If you're still having issues, you can try this alternative code:

<div class='theDownBar'>
    <a href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'>
        <img src='https://newimageurl.com/photo.jpg'/>
    </a>
</div>

Just make sure to update the image URL with your own. Hope that helps!

Answer №2

.whatsapp-icon {
  background-size: contain;
  border-radius: 5px;
  margin-top: 10px;
  height: 35px;
  width: 35px;
  display: block;
  background-repeat:no-repeat;
    background-position: center;
  float: right;
  text-decoration: none;
}
<div class='theDownBar'>
  <a style="background-image: url('https://imageog.flaticon.com/icons/png/512/33/33447.png?size=1200x630f&pad=10,10,10,10&ext=png&bg=FFFFFFFF');"
     href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a>
</div>

After making these adjustments, everything is functioning correctly! It's possible that the issue lies with your image source being invalid.

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

How to Parse HTML Content within a JSON Field using C#

Is there a way to decode an HTML string inside a JSON property using a console application, like in the example below?: { "type":"text", "html":"\n\n\n <div class=\"class\">\n <ul>\n\n&b ...

c#htmldeserialization

What is the best way to position a div to float or hover from the bottom after it has been

I am working on creating a menu where clicking it will reveal a submenu at the bottom, but I'm encountering an issue. Currently, in my code, the submenu is appearing from right to left before moving down. Here is my code: <meta name="viewport" co ...

javascriptjqueryhtmlcss

Reorganize Material UI Grid Items with varying lengths

I'm currently working with a Material UI grid system that appears as shown below: <> <Typography gutterBottom variant='h6'> Add New User{' '} </Typography> <Grid container spacing={3} ...

javascriptcssreactjsmaterial-ui

Is it possible to enable auto play on HTML5 Video for iPad similar to BBC iPlayer?

Can HTML5 Videos automatically play on iPads? I used to believe that it wasn't possible because of iOS restrictions, but after trying BBC iPlayer on my iPad, I noticed that the videos did autoplay upon loading. Could this indicate that it is indeed ...

javascriptioshtmlipadhtml5-video

Troubleshooting issues with jQuery post on dynamically generated jQuery elements

DISCLAIMER: The following question is extracted from the post: jQuery not working on elements created by jQuery I'm using jQuery to dynamically insert list items into a list through an ajax call that runs every second. Below is the code for the ajax ...

phpjavascriptjqueryhtmlajax

Styling the ::selection inline with CSS allows for custom

I have a div element that I would like to customize the text selection style for. Currently, setting the style using CSS works perfectly: <div>Text text here</div> <style> div::selection { background: #FFF; color: #0 ...

htmlcsstextselectioninline-styles

I need to verify that the input type for time is valid, starting from today's date and extending beyond the current

<input type="date" onChange={(e)=>setDate(e.target.value)}/> <input type="time" onChange={(e)=>setTime(e.target.value)} /> If the selected date is after today and the time is after the current time, display a valida ...

javascripthtmlcssreactjstypescript

The SVG icon displays properly when viewed on a local machine, but is missing when the website is deployed

Something strange is happening with my SVG sprites. Everything seems to be working fine when I test my code locally, but once deployed on Firebase, one of the SVG images fails to appear. What could be causing this issue? Below is the code for two SVGs: sm ...

htmlcssreactjssvg

How can I enable the "edit" function for a button within a list item?

I am currently working on a feature that allows users to edit list rows by clicking a button. However, I am facing an issue where the "edit" button only edits the first row instead of the matched line. This functionality is part of a program I am developi ...

javascripthtml

What are some ways to customize the appearance of Skype for Business HTML messages when integrating with the Bot Framework?

Recently, I created a bot using Microsoft's bot framework and I've noticed that while it supports sending HTML messages, the CSS styling doesn't seem to work. As a result, the HTML messages appear quite bland and I'm really eager to add ...

c#htmlcssbotframeworkskype-for-business

State variable fails to maintain its value during onChange event

I'm currently working on implementing a text box in a pop-up window for my application. To allow users to input text, I've utilized a useState variable and update the state with the value of the input during the onChange event. However, I'm ...

javascripthtmlreactjsweb

Toggle the submit button using jQuery based on the comparison of the jml_automatic field with the id_km field

I recently learned jQuery last month, and now I am working on a form using jQuery to allow users to input gas requests. However, the script is not working to compare the values from #jml_km with #id_km, and the submit button is still not disabled when the ...

javascriptphphtmljquerybutton

How can a full-screen background image be created in Next.js?

To achieve a full height display in both the html and body tags, how can we do this within a next.js component? Check out [1]: https://i.stack.imgur.com/K1r9l.png [2] Visit: https://www.w3schools.com/howto/howto_css_full_page.asp "mainImage.jsx" import ...

htmlcssreactjsnext.js

Discover the technique of accessing HTML/CSS toggle switch value in Golang

I am attempting to incorporate a toggle switch into my webpage. I followed this specific tutorial for guidance: w3schools.com Currently, I have set up my HTML file with a button and the toggle switch. Additionally, I configured my web server in Go to lis ...

javascripthtmlcssgo

Arranging links in a horizontal line (JSFiddle)

CodePen: https://codepen.io/example/abc123 I am attempting to align the elements "Favourite", "0", and "Reply" next to each other so they appear as: Favourite 0 Reply ...

cssasp.net

Trouble Aligning HTML in OUTLOOK's Center Position

Today, I've invested hours into solving an issue with my HTML email layout. It seems to display perfectly on most email clients except Outlook – the centering of the layout in the preview just won't cooperate. I've attempted using the < ...

htmlemailresponsive-designoutlookcenter

Can you place more than one Twitter Bootstrap carousel on a single webpage?

Latest Version of Twitter Bootstrap: 2.0.3 Sample HTML Code: <!DOCTYPE html> <html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"> <head> <link rel="stylesheet" type="text/css" media="all" href="reddlec/style. ...

javascripthtmltwitter-bootstrap

Issue with Bootstrap 4 nested collapse: "data-parent" attribute malfunctioning

I'm looking to implement the collapse data-parent options in a way that mimics traditional accordion behavior: all collapsible elements under a specified parent should close when a new one is opened. However, I am encountering issues with this setup. ...

javascripthtmltwitter-bootstrapbootstrap-4

Tips for retrieving the count from HTML using JavaScript:

I need to determine the count of list items in an unordered list within dir-pagination-controls. How can I achieve this using JavaScript? <dir-pagination-controls min-size="1" direction-links="true" boundary-links="true" class="pull-right ng-isolate- ...

javascriptjqueryhtmlangularjs

Ways to generate a distinct identification number for every element within a component instance

I have a ReactJS component that I use in multiple instances. I'm trying to change the CSS elements of each component on click. Initially, I tried referencing the specific component element by ID, but the issue is that all instances currently share t ...

javascripthtmlcssreactjsdom