I've HTML, CSS, JS application working with cordova. I'm trying to show an whatsapp icon image on the page using CSS background image.
The image is loaded. However, the image isn't showing and the console doesn't show an error of image access forbidden, image not found, etc...
I've tried to show image using <img /> But with no use.
I've tried using this css property : background-size: contain !important;
I've tried to change background-position value.
I've tried to use background-image in the inline css style of the element.
I've tried adding text to <a> element.
None of them worked !
Here's 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>
EDIT : Added some images to clarify
The element is showing and has width and height
There's no console error, and the image loaded successfully when I check the source
Bro for me your code is working fine i just changed the image url see this:
<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://lh5.googleusercontent.com/-GuUP5Jaz3Rg/AAAAAAAAAAI/AAAAAAAAAAc/HwaA1tNmtd0/photo.jpg);' href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'></a></div>
You should check it again but if it still didn't work then try this code:
<div class='theDownBar'>
<a href='https://api.whatsapp.com/send?phone=phonenumber' class='whatsapp-icon'>
<img src='https://lh5.googleusercontent.com/-GuUP5Jaz3Rg/AAAAAAAAAAI/AAAAAAAAAAc/HwaA1tNmtd0/photo.jpg'/>
</a></div>
Don't forget to replace image url to your own.
.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>
i did this and its work! probably check your image is invalid!
Related
I can't remove border from my images. I've tried many times with different atributes. Still see white border. If you have any suggestion what causes the problem - please explain to me. I'm kinda newbie.
<head>
<style>
img{
border : none;
text-decoration: none;
}
#forum
{
background:url(forum_button.png) 0px 0px no-repeat;
width: 300px;
height: 81px;
}
#forum:hover
{
background:url(forum_button.png) -300px 0px no-repeat;
width: 300px;
height: 81px;
}
#facebook
{
background:url(social_buttons.png) 0px 0px no-repeat;
width: 29px;
height: 29px;
}
#facebook:hover
{
background:url(social_buttons.png) 0px -33px no-repeat;
width: 29px;
height: 29px;
}
#twitter
{
background:url(social_buttons.png) -31px 0px no-repeat;
width: 29px;
height: 29px;
}
#twitter:hover
{
background:url(social_buttons.png) -31px -33px no-repeat;
width: 29px;
height: 29px;
}
</style>
</head>
<body style="background:url(landing.png) no-repeat top #111111; width: 1280px; height: 1024px; border:0;">
<img id="forum" />
<div id="social">
<img id="facebook">
<img id="twitter">
</div>
It's because an img tag MUST have a src="" with a proper link otherwise it will be showing the image as a background like in your case (because of the css on the img) and a broken image on top of it
="#"><img id="facebook"></
It's not a border, what you see is the broken image border.
If you want to keep your code, change the img tag to a div..
Change
border: none;
to
border: none !important;
This way it will override all the parent's declarations and thus has to work.
That's probably because you have no src attribute on your img tags. I'd reccommend using transparent pixel as src in your case.
Insert Image by using img src with proper height and width.
Use Paint or other tools to edit image.
example.
make sure that your original image dont have any border, if it have simply select and crop the image.
maybe the border is not html given but its in your img ?
So open your image in an image program tool like photoshop and zoom to the places where the border is and have a look, if there is a border or not.
You are trying to set an icon image on a link using a background image that can be repositioned on a hover event.
The simplest way of doing this is as follows.
The HTML can be as simple as:
<a class="test" id="test" href="#"></a>
and apply the following CSS:
.test {
background: beige url(http://placekitten.com/50/50) center center no-repeat;
display: inline-block;
width: 50px;
height: 50px;
border: none;
}
Apply the background image on the link (a tag) instead of an img tag, which is not needed.
See demo at: http://jsfiddle.net/audetwebdesign/qAeHL/
Right then, I've just been playing with my site, and adding a "new" banner onto some of the images, I've done this the simplest way I could think which is as follows..
<img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" /></a>
Now this works fine when viewed on a desktop as the images are already the right size for the site, but when I view it on a mobile device the .png image is scaled down, but not the background image..
I know I'm missing something from the css, but as I'm still learning, I don't know exactly what its missing, which is where you guys come in..
here is a little more of my html..
<div class="thumbnail">
<a href="#">
<img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" />
</a>
</div>
And here is the mobile css in question..
.thumbnails
{
}
.thumbnails .thumbnail
{
border-top: solid 1px #e5e5e5;
padding-top: 2em;
margin-top: 2em;
}
.thumbnails .first
{
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.thumbnails .thumbnail img
{
margin-top: 5px;
height: 180px;
margin-right: 8px;
}
.thumbnails .thumbnail blockquote
{
margin-left: 143px;
}
So basically, I just need to know, how to make the background image scale down like the foreground image (the .png image)
I'm sure someone can help, so many thanks in advance.
EDIT: Here is a quick fiddle, so you can see whats going on... http://jsfiddle.net/bBMdp/
Thanks
Try this:
.thumbnails .thumbnail img{
margin-top: 5px;
height: 180px;
margin-right: 8px;
background-size: 100% 100%;
}
Or:
.thumbnails .thumbnail img{
margin-top: 5px;
height: 180px;
margin-right: 8px;
background-size: cover;
}
Source(s)
MDN - background-size - CSS
Use background-size:XXpx XXpx; first value is take width and second value is take height.
-webkit-background-style: cover;
-moz-background-style: cover;
-o-background-size: cover;
background-style: cover;
This will scale down the background so it's only ever big enough to cover the whole box.
I have a social media widgets that i wanna include in my website. I have a grayscale and a colored image for each widget. The trick is to change the color of the widgets to grayscale to colored upon mouse hover. All seems to work correctly until i inserted into the code. The hover no longer works. Could someone have an idea how to solve this problem. Thanks in advance.
here is the html code.
<html>
<header>
<title>image hover</title>
<link rel="stylesheet" type = "text/css" href= "style.css"/>
</header>
<body>
<div id = "wrapper">
<div id = "facebook"><img src = "images/facebook.fw.png"/></div>
<div id = "twitter"></div>
<div id = "googleplus"></div>
<div id = "whatsapp"></div>
<div id = "skype"></div>
</div>
</body>
</html>
and the css:
body{margin: 0; border:0; padding: 0;}
#wrapper{width: 960px; margin: 50px auto; height: 500px; border: 1px solid #dedede;}
#facebook{background-image: url('images/facebook.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px;}
#facebook:hover{background-image:url('images/facebook1.fw.png');}
#twitter{background-image: url('images/twitter.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px; margin-left: 10px;}
#twitter:hover{background-image:url('images/twitter1.fw.png');}
#googleplus{background-image: url('images/googlep.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px; margin-left: 10px;}
#googleplus:hover{background-image:url('images/googlep1.fw.png');}
#whatsapp{background-image: url('images/whatsapp.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px; margin-left: 10px;}
#whatsapp:hover{background-image:url('images/whatsapp1.fw.png');}
#skype{background-image: url('images/skype.fw.png'); background-repeat: no-repeat; float: left; height: 52px; width: 52px; margin-left: 10px;}
#skype:hover{background-image:url('images/skype1.fw.png');}
The :hover probably works fine, it's just that you added the img tag in front of it and you can't see the change...
You can't change HTML elements on hover with CSS :hover. What you can change with that is the CSS styling. In this case, what you are wanting to do is change the BACKGROUND image from a B&G to the color one. So, in your html you define this as a link, in your css you define its size, regular BACKGROUND image, and then (for example) #facebook a:hover {code stuff}
In other words, get rid of the in the HTML, and instead use the CSS to define the original image and hover state image using the background image attribute. Also, don't forget to define the dimensions for this area.
I have this landing page. I'd like the email to be a link to mailto:info#domain.tld.
I tried to use a map (usemap="#mail" on body and then map name="mail">) but it doesn't work. I tried also with a blank transparent png image (to set the usemap to) but the link isn't clickable.
How can I achieve the area of the email to have a link upon it? Of course it should work on different resolutions.
Why don't you just render the email link as text? It looks like it can be similar to Open Sans: http://www.google.com/webfonts/specimen/Open+Sans
You could do something like this:
ADD CSS:
div#mail {
margin-left: 67%;
margin-top: 31.8%;
overflow: hidden;
width: 16%;
}
a {
color: transparent;
}
ADD HTML:
<div id="mail">info#gioiellidisapone.it</div>
Demo: http://jsfiddle.net/fXats/
It's not perfect, but maybe it's good enough. :)
This is how I modified your page directly using Inspect element, and the link stays on top of the image text. This is another option, but has fixed width and height to support the positioning of the email.
<body>
<div style="
width: 1430px;
position: absolute;
border: 1px solid #000;
height: 700px;
background-image: url(home2.jpg);
background-repeat: no-repeat;
background-position: top center;
display: inline-block;
"><a href="#" style="
position: relative;
top: 450px;
right: 294px;
display: inline-block;
float: right;
">Info#gioiellidisapone.it</a>
</div>
</body>
I am having problems with the following link:
the play image is a <span> element with a background image used with a css sprite.
When i hover over the isotope hydrology image like in the image above everything works fine (link and css sprite). The problem is in IE9, when the cursor hovers over the css sprite(play button) the sprite goes back to the non-hover look and you cannot click to the link from inside (see image below).
If anyone knows why this is happening that would be awesome. Here's a jsfiddle I made for it, but it doesn't recreate the problem.
I have the following html and css:
html:
<div id="video-box-left">
<div class="video-img">
<a href="#" onclick="window.open('http://wwwindex.html','photoessay','scrollbars=no,resizable=yes,width=850,height=722')">
<span class="video-play-q-left">play</span>
<img src="resources-na/images/forum.PNG" width="200" height="155" border="1"></a>
</div>
<div class="video-text">
<p><strong>Food for the Future</strong></p>
</div>
</div>
css:
#video-box-left{
margin-left: 10px;
margin-right: 20px;
float: left;
width: 210px;
}
.video-img {
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
margin-bottom: 5px;
padding: 4px;
width: 200px;
height: 155px;
}
.video-text {
}
.video-play-q-left {
background: url("../images/video-play-q-big.png") no-repeat scroll 0 0 transparent;
background-position: center top;
height: 50px;
position: absolute;
text-indent: -9999em;
width: 50px;
left: 100px;
top: 127px;
}
a:hover .video-play-q-left{
background-position: center bottom;
}
I'd guess this is due to an issue with the DOCTYPE of your document which causes IE9 to render the document in quirks mode. That would explain why the JSFiddle doesn't reproduce the problem. Try opening the Developer Console in IE9 and make sure Document Mode and Browser mode are both set to IE9. If that solves your problem, make sure your DOCTYPE tag is set to HTML 5, e.g.
<!DOCTYPE html>