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/
Related
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!
I have a DIV that change his color when mouse over
I want to change the image inside the div when mouse over the div, not over the necessarily on the image
In the HTML
<div class="about">
<img class="about-project1">
CSS
.about-project1 {
width: 121px;
height: 42px;
background: url("img/coching.png") no-repeat;
border: 0px;
}
.about:hover h3 {
color: #fff;
}
.about a about-project1:hover {
background: url("img/coching_white.png") no-repeat;
}
Another thing is that the image appears with border although i tell border:0
why ?
10x very much
Udi
The following code will do what you want:
HTML
<div class="about">
<div class="about-project1"/>
</div>
CSS
.about-project1 {
width: 121px;
height: 42px;
background: url("https://www.gstatic.com/webp/gallery3/1.sm.png") no-repeat;
}
.about:hover h3 {
color: #fff;
}
.about:hover .about-project1 {
background: url("https://www.gstatic.com/webp/gallery/4.sm.jpg") no-repeat;
}
Finally, your image had a border because it was an img element with no src attribute, I changed the original code to use a div instead.
Fiddle is here
There is a border around the container which is white in color. I tried the border: 0; rule but it doesn't remove it at all.
EDIT: http://mpkosis28.com
CSS:
#content {
height: 350px;
width: 700px;
margin-left: auto;
margin-right: auto;
border: 0;
text-align: center;
}
#content img {
top: 30%;
left: 50%;
width: 50%;
background: url(../images/awd/boxas.png) no-repeat center;
background-size: cover;
height: 300px;
}
#content a img {
border: 0;
}
<div id="content" align="center">
<h1 class="centeredImage"><img></h1>
</div>
This must work:
#content a img {
border: none;
}
First Set image tag attribute border = 0 in your html file
and in css file change like this.
#content a{
border:none;
outline:none;
}
#content a img{
border:none;
outline:none;
}
If you set the image source in the regular fashion like <img src="..." /> instead of as a background css property it will not show the border. Is there a reason why you need to set it as a background property?
It is just the browser implementation of showing that the src attribute <img> doesn't have valid image link.
Solution for your code:
copy the background url from the css to src attribute of the <img>.
change the <img> to <div>, and adjust it according to your requirements.
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>