I have basic code with bootstrap and a svg sprit in a header / menu.. and there is a thin gray background line in the icons.
http://codepen.io/anon/pen/dpzKoQ?editors=1100
can you please help. I have tried setting
border-* etc to 0 - and I can fix. I set the colors / background - but some place I am missing something.
some place it is getting the below value from normalize.less
border-image-width: 1 ;
code: please see codepen.
.icon {
display: inline-block;
background-repeat: no-repeat;
background-image: url(https://cdn.rawgit.com/srisitar/test/master/sprite.svg);
}
.icon-facebook {
width: 96px;
height: 96px;
background-position: 0 0;
}
.icon-twitter {
width: 96px;
height: 96px;
background-position: -128px 0;
}
<
div id="home">
<a href=" ">
<img class="icon icon-twitter"></a>
</div>
how do remove the gray line.
thanks
It's because you are using an img tag with no src attribute. Chrome is essentially indicating the size of the container with nothing in it.
If you don't want to place an image between the anchor tags, then don't use an image tag. It's not necessary to place anything between the tags.
Demo here.
You can use div tag with background-image in css instead of using img tag.
Related
So here's the problem - i need an image to slightly change when the cursor is hovering on it. However, simply writing something like this in CSS styles:
img {src="";} img:hover {src="";}
seems to do nothing. Is there a solution to this problem using only HTML and CSS?
Thank you for your time!
You can use background-image property and change the url on hover
img {
height: 200px;
width: 200px;
background-image: url("https://pixy.org/src/477/4774988.jpg");
background-size: 200px 200px;
;
}
img:hover {
background-image: url("https://pixy.org/src/19/193722.jpg");
}
<img />
I made a CSS sprite using this online site. Here are the files I'm using. This is what I have right now in my HTML markup:
<img width="1" height="1" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="" title="" class="e-shop" />
Since src can't be null I set a empty GIF in base64. Now, the problem is that the sprite.png file isn't loaded. So I modified the original code changing to this:
.contactenos, .contactenos-1, img.e-shop, .e-shop-1, .faq, .faq-1, .fctjur, .fctjur-1, .fctnat, .fctnat-1, .vendidos, .vendidos-1{
background: url(sprites.png) no-repeat;
}
But it's not working, maybe I'm doing something wrong, it's the first time I did this, any advice or help?
Test 1
I made some changes to the original CSS as follow:
.contactenos, .e-shop, .faq, .fctjur, .fctnat, .vendidos {
background: url(sprites.png) no-repeat;
}
.e-shop{
background-position: -198px -2px ;
width: 128px;
height: 50px;
}
.e-shop:hover {
background-position: -200px -56px ;
width: 128px;
height: 50px;
}
But still not working, is the problem the tiny default src image?
If that's your entire CSS, then you're missing a few things. Here's a fiddle using your markup and CSS (with a hard coded background image):
http://jsfiddle.net/5jvdmzgc/
You'll need to specify your elements width and height (right now, they're 1x1) and also the offset of the background image (if any).
Updated CSS:
width: 150px;
height: 50px;
background-position: -70px -120px;
Updated fiddle with different sizes specified:
http://jsfiddle.net/5jvdmzgc/1/
You can use the CSS you wrote as a "base" (specifies the image source), and then extend that with individual classes (width/height/bg offsets).
Hopefully this helps!
Your gif is only 1px by 1px. So your bg image is not going to be visible. You'll need to either set the dimensions in your css or provide a gif with the correct dimensions.
For example if your background image/sprite was 50px by 50px you could do this:
img.e-shop {
width: 50px;
height: 50px;
}
or
<img class="e-shop" src="
R0lGODlhMgAyAIAAAP///wAAACH5BAEAAAAALAAAAAAyADIAAAIzhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKicFADs=
" />
Fiddle
I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.
Here is the CSS for what I want to do
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
Any help would be greatly appreciated
Okay added the following and still not go any other thoughts
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}
An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px.
You could also change the aproach completely and use html + mouseover and mouseout events:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank">
<img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
</a>
</div>
Here is a jsBin: http://jsbin.com/onehuw/1/edit
background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).
You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:
a.fb {
padding: 20px;
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
You could also just set the width and height of the anchor
I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.
I am using CSS for hover and it works, but the hover image allow the background image (pic_normal) to display like transparent behind the image(pic_hover).
How to display only the hover image when mouse over on it?
HTML
<img id="first" src="images/clients/pic_normal.png" />
CSS
#first img:hover {
background-image: url("/images/clients/pic_hover.png");
background-repeat: no-repeat;
}
Your CSS works just fine as intended - it changes the background of your img element. Think about the pic_normal.png as the content of your element (e.gg. some text). When you changing the background the content doesn't change.
Try this instead - http://jsfiddle.net/WvKye/
<div id="first"></div>
#first {
background: url("images/clients/pic_normal.png") no-repeat;
height: 300px;
width: 300px;
}
#first:hover {
background: url("images/clients/pic_hover.png") no-repeat;
}
Use this:
<img onMouseOver="this.src='images/clients/pic_normal.png'"
onMouseOut="this.src='images/clients/pic_normal.png'"
src="images/clients/pic_normal.png"/>
I think u need some javascript for that
Using Jquery u can do like this
$("#first").hover(function()
{
$(this).attr("src","/images/clients/pic_hover.png");
},function()
{
$(this).attr("src","/images/clients/pic_normal.png");
}
);