I create css class with background-image property.
Here is css class:
.showLayers{
background-image: url("https://cdn0.iconfinder.com/data/icons/flat-online-2/64/layers_server_online_web_internet-128.png");
background-repeat: no-repeat;
background-size: 40px 40px;
}
And here is two other css classes that I use:
.miniToolbarContant{
cursor:pointer;
width:40px;
height:40px;
transition: transform 0.3s;
}
.button_air-medium {
cursor: pointer;
height: 65px;
width: 65px;
background-color: #fff;
border-radius: 36px;
border: 0;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}
Here is HTML:
<button type="button" class="button_air-medium ">
<img id="showLayers" class="miniToolbarContant showLayers"/>
</button>
Here is how it looks:
And here is fiddler.
As you can see on the image above I have rectangle that wrap the icon.
My question is how to remove rectangle that wrap the icon?
You are defining the image as a background-image for an img tag, which doesn't make sense. Use a div tag instead: https://jsfiddle.net/kbz6opss/1/
This is caused by <img> tag, try to not use <img> when background images is used.
css is weird, if you use img tag you want to use the src attribute
<img id="showLayers"src="https://cdn0.iconfinder.com/data/icons/flat-online-2/64/layers_server_online_web_internet-128.png" class="miniToolbarContant showLayers"/>
and remove background url from css,
else it will create that border no matter what you do (as far as I know of).
Related
I understand the basics of CSS.In fragments.
I try to understand how to combine all of what I want together.
I want to create two types of buttons, "view" and "save".
I have 4 images, two for each, where one represents the button, and one when mouse hovers it.
So I want an alternative background when hover.
I want also a tooltip, something "cheap" like "View file", "Save file", that better explains the content of the image if it wasn't clear enough.
I understand that I need to use the hover attribute, background attribute, and somehow to create a tooltip.
Those two buttons are actually images with a link
How do I combine it all together?
you could do something like this:
<div title="View File" class="view-button">
View File
</div>
CSS:
.view-button {
background-image: url("first-view-image");
}
.view-button:hover {
background-image: url("second-view-image");
}
And the same for the save button. The title tag shows a small tooltip. if you want bigger/fancier tooltips, you have to use some javaScript framework.
check this out
HTML
<button>Hello</button>
CSS
button {
background: url(your-image.png) no-repeat;
}
button:hover {
background: url(your-image-hovered.png) no-repeat;
}
button:focus {
background: url(your-image-focused.png) no-repeat;
}
Hi i've created a fiddle for you. When you hover the image/button changes and also you get a small tooltip that says "Click here to Save". Is that all you need? Tell me if this helped you or you have any questions.
EXAMPLE
HTML
CSS
.save {
margin-bottom: 10px;
width: 47px;
height:20px;
display:block;
background:transparent url('http://www.mtsworld.com/images/button_submit.gif') center top no-repeat;
}
.save:hover {
background-image: url('http://www.ecdoe.gov.za/ecdoe/graphics/buttons/submit.png');
}
This is my example, change background value to your image, to use tooltip i used jqueryui
Example
html
<a href='#' class='button savebutton' title='Save form'>Save</a>
<a href='#' class='button cancelbutton' title='Cancel action'>Cancel</a>
css
.button{
background : #999;
padding : 5px 10px;
border-radius : 5px;
color:#fff;
text-decoration : none;
}
.savebutton{
background : blue;
}
.cancelbutton{
background : orange;
}
.savebutton:hover{
background : cyan;
}
.cancelbutton:hover{
background : yellow;
}
.ui-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
border-width: 2px;
}
JS
$('.button').tooltip();
I have got a little problem with setting a background image for <button>.
Here is the html I have got on site:
<button id="rock" onClick="choose(1)">Rock</button>
And here is the CSS:
button {
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px;
}
button #rock {
background: url(img/rock.png) no-repeat;
}
I don't know why the button's background is still white.
Astonishing that no answer addresses or mentions the actual problem here.
The CSS selector button #rock says "give me an element with the id rock inside a <button> element", like this:
<button>
<span id="rock">This element is going to be affected.</span>
</button>
But what you wanted is a <button> element with the id rock. And the selector for that would be button#rock (note the missing space between button and #rock).
And as #Greg already mentioned: #rock is already specific enough to target the button and could be used on its own.
For some odd reason, the width and height of the button have been reset. You need to specify them in the ID selector as well:
#rock {
width: 150px;
height: 150px;
background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png);
background-repeat: no-repeat;
}
Live test case.
You need to call CLASS in button
<button class="tim" id="rock" onClick="choose(1)">Rock</button>
<style>
.tim{
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px; background-image: url(images/Sun.jpg);
}
</style>
Replace
button #rock
With
#rock
No need for additional selector scope. You're using an id which is as specific as you can be.
JsBin example: http://jsbin.com/idobar/1/edit
Delete "button" before # rock:
button #rock {
background: url(img/rock.png) no-repeat;
}
Worked for me in Google Chrome.
Try changing your CSS to this
button #rock {
background: url('img/rock.png') no-repeat;
}
...provided that the image is in that place
To get rid of the white color you have to set the background-color to transparent:
button {
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px;
background-color: transparent; /* like this */
}
You absolutely need a button tag element?
because you can use instead an input type="button" element.
Then just link this CSS:
input[type="button"]{
width:150px;
height:150px;
/*just this*/ background-image: url(https://images.freeimages.com/images/large-previews/48d/marguerite-1372118.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 150px 150px;
}
<input type="button"/>
try this way
<button>
<img height="100%" src="images/s.png"/>
</button>
This is my first post. I'm still learning CSS and your help is much appreciated.
I have been trying to create a Div that contains an image with a transparent overlay with a semi transparent border at the bottom. On hover, a second transparent overlay is added making the bottom border darker. I then have another div containing some title text, the title text should change colour on hover anywhere in the parent Div as well as the whole thing be linked on click.
The closest thing to it is on Vimeo here:
http://vimeo.com/categories
I have managed to achieve all of this and it has been working fine in IE and Firefox and safari etc. But with IE10 the text no longer changes colour on hover nor is the div clickable.
Here's my CSS:
.videoCatThumbImg {
position:relative;
background:#FFFFFF;
width: 178px;
height: 178px;
padding: 5px 5px 5px 5px;
margin: 10px 0px 0px 0px;
border: 1px solid #CCCCCC;
line-height:normal;
float:left;
}
.videoCatTskin {
position: absolute; top: 5px; left: 5px;
}
.videoCatThumbHover {
position: absolute; top: 5px; left: 5px; display: none;
}
.videoCatThumbImg:hover .videoCatThumbHover{
display: block;
}
.videoCatTitle {
position:absolute;
top:5px; left:5px;
display:block;
width:173px;
height:26px;
padding:152px 0px 0px 5px;
Font-size:18px;
font-weight:bold;
color: #ffffff;
}
.videoCatTitle:hover {
color: #5798ca;
}
and here's my HTML:
<div class="videoCatThumbImg">
<img src="http://www.mydomain.com/images/vcat/image_thumb.gif" alt=""/>
<img class="videoCatTskin" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<img class="videoCatThumbHover" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
<div class="videoCatTitle">Some Text Here</div>
</div>
Any advice on what I'm doing wrong is very welcome.
Similar to this answer, try adding a background (transparent image or same-color will work), to the hover classes that don't have it (.videoCatThumbImg:hover).
Just had the problem. None of the solutions were working (border, background, hasLayout).
In the end, I switched to XHTML 1 Strict doctype and it worked, if it can help...
I'm redoing a site in which I'm using a CSS sprite. I'm also using the sprite with some tags, which I cannot remove.
So the tag gets a CSS-background-image and appropriate background position. Works fine. I had to remove the alt-attribute, because this kept showing on Firefox. Not nice, but ok.
My problem:
In Chrome I end up having a faint outline around the image. I first thought these were border, but I think it's outline.
If I CSS outline: 3px solid blue the faint border, becomes 3px solid blue... but if I set outline: 0; nothing happens.
More code:
HTML
<img class="ui-li-icon ui-li-thumb iconComments" />
CSS
.ui-icon, .iconComments, .iconMail, .ui-icon-searchfield:after {
background: #FFFFFF /*{global-icon-color}*/;
background: transparent /*{global-icon-disc}*/;
background-image: url(img/sprite.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
.iconComments {
background-position: -36px 50%;
}
.iconMail {
background-position: 2px 50%;
}
.iconComments, .iconMail {
height: 20px;
width: 20px;
}
Any idea, where the outline/border is coming from and how to remove it?
Thanks
The issue is likely due to the fact that you do not have a src attribute within your image tag.
If you can absolutely position the image, you can use the sprite directly in the foreground using the CSS clip property.
Usually this is caused by the border attribute. I know you said you think it's outline, but did you try this in your img class...
.imgClass
{
border-style: none;
text-decoration: none;
}
or this
.imgClass
{
border:0;
}
K so I have an image in my html and I am settings its src using css and background: url() the reason for this is because I want to toggle the class on click so that I go back and forth between images. Everything works except for the fact that my image has a border and nothing I do seems to get rid of the stupid thing.
Here is the html:
<img class="minus" />
and here is the css:
.minus{
position: relative;
margin: 0 0 -3px 5px;
float:right;
background: url(/images/mobile/minus.png) no-repeat;
border: none;
display:block;
width: 16px;
height: 16px;
}
I have tried everything I can think of border:0px; border:0; border-width: 0px; border-style:none; anything I could find on here or on the web basicly and nothing will get rid of the stupid border. Any insight would be appreciated.
Edit: using google chrome.
I'm certainly able to reproduce this error in Chrome. Here's a demo:
.minus{
display: block;
margin: 0 0 -3px 5px;
background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
width: 100px;
height: 100px;
}
<img class="minus">
However, w3.org specifies (emphasis mine):
The SRC attribute specifies the URI for the image to be embedded. Its syntax is the same as that of the HREF attribute of the tag. SRC is mandatory.
Setting a CSS background-image is not the same as setting the src HTML attribute of <img>... and perhaps that's your problem. You should consider using a different element, e.g.: a <span>:
.minus {
display: block;
margin: 0 0 -3px 5px;
background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
width: 100px;
height: 100px;
}
<span class="minus"></span>
Here is a fiddle that uses a div with the class (I see no border). When I try an img with the class, it shows nothing (in firefox 7)