I have a sprite of icons:
http://i.piccy.info/i9/3d2e4aea3daed4a0057c88c6e7c1b6a0/1566832397/25899/1334677/Screenshot_12.png
I need to insert the last icon in the menu, next to the text.
CSS with code looks like that:
.game-tab .left-header .game-icon.double,
.history-top .left-header .game-icon.double {
background-position: -48px -38px
}
.menu .navigation .game-selector-list .game-selector.active .game-info .game-icon.double {
background-position: -5px -137px
}
.menu .navigation .game-selector-list .game-selector .game-info .game-icon.double {
background-position: -5px -93px
}
As I understand it, to insert the last icon, I need to calculate the pixels and fit in the css? How can i do this? Or how to display this icon correctly?
I have found the first one for you
.first{
background-image: url("http://i.piccy.info/i9/3d2e4aea3daed4a0057c88c6e7c1b6a0/1566832397/25899/1334677/Screenshot_12.png");
background-repeat: no-repeat;
background-position: -85px -18px;
width: 36px;
height: 36px;
}
from this, subtract about 44 from -18 for each subsiquent image.
Related
I would like to switch images from an sprite map when using hover. The images are classes. So far I have
(I have multiple images all with a hover image.)
.contact-icon, .contact-icon-2, .help-icon, .help-icon-2{
background: url(sprites.png) no-repeat;}
-positioning for first image
.contact-icon{
background-position: 0 -77px ;
width: 66px;
height: 66px;}
-
.contact-icon:hover, .contact-icon:active{
.contact-icon-2{
background-position: -95px -75px ;
width: 66px;
height: 66px;
}
}
Or
.contact-icon:hover, .contact-icon:active ~ .contact-icon-2{
background-position: -95px -75px ;
width: 66px;
height: 66px;
}
Should I first declare positioning for the second image and then write a css code for hover with just the class inside? Or can I just style the class within the hover class?
Create a class having common properties of icons like :
.sprite {
background: url(sprites.png) no-repeat;
width: 66px;
height: 66px;
display:inline-block;
}
then create unique classes for each of your icon :
.contact-icon{
background-position: 0 -77px ;
}
then hover actions for each :
.contact-icon:hover{
background-position: -95px -75px ;
}
use it like this in your html:
I have my css prefixed but my transitions only work in safari. I'm testing in the latest versions of Opera, Chrome and Firefox. The image does move on hover, the different colour icon appears, but no transition effect like I have in Safari.
Here is my scss:
li {
height: em(36);
width: em(28);
display: inline-block;
}
li:first-child {
background-image: url(social.svg);
background-position: 84px 0px;
/*transition-property*/
-webkit-transition-property:transition;
-moz-transition-property:transition;
-o-transition-property:transition;
transition-property:transition;
/*transition-duration*/
-webkit-transition-duration:350ms;
-moz-transition-duration:350ms;
-o-transition-duration:350ms;
transition-duration:350ms;
&:hover{
background-position: 84px -36px;
}
}
li:nth-child(2) {
background-image: url(social.svg);
background-position: 56px 0px;
/*transition-property*/
-webkit-transition-property:transition;
-moz-transition-property:transition;
-o-transition-property:transition;
transition-property:transition;
/*transition-duration*/
-webkit-transition-duration:350ms;
-moz-transition-duration:350ms;
-o-transition-duration:350ms;
transition-duration:350ms;
&:hover{
background-position: 56px -36px;
}
}
li:nth-child(3) {
background-image: url(social.svg);
background-position: 28px 0px;
/*transition-property*/
-webkit-transition-property:transition;
-moz-transition-property:transition;
-o-transition-property:transition;
transition-property:transition;
/*transition-duration*/
-webkit-transition-duration:350ms;
-moz-transition-duration:350ms;
-o-transition-duration:350ms;
transition-duration:350ms;
&:hover{
background-position: 28px -36px;
}
}
I really have no ideas why its not working. Any help would be great.
Thanks in advance,
Alex
The valid values for transition-property are:
transition-property: none|all|property;
Try using all instead of transition.
nav li a.home { background:url('../img/custom_icons/home.png') no-repeat center; background-size: 30px 30px; background-position: 0px -1px;}
nav li a.contact { background:url('../img/custom_icons/email.png') no-repeat center; background-size: 32px 35px; background-position: 0px -1px; }
nav li a.show_all { background:url('../img/custom_icons/slide.png') no-repeat center; background-size: 35px 50px; background-position: -5px -10px; }
#facebook {
background: url(../img/custom_icons/facebook.png) no-repeat;
background-size:30px 30px;
}
#sina {
background: url(../img/custom_icons/sina.png) no-repeat;
background-size:30px 30px;
}
I found that those background image in chrome / fx or other browser is perfectlly positioned, but not in IE 8 , it is either too small/ big or just move to other place.How to fix the problem and work just the same as other browser ? thanks
Updated : After adding ms filter, still not working?
nav li a.home { background:url('../img/custom_icons/home.png') no-repeat center; background-size: 30px 30px; background-position: 0px -1px;}
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../img/custom_icons/home.png',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../img/custom_icons/home.png',
sizingMethod='scale')";
Here is the css file after adding the suggested filter. However, it still not working? Is it correct to place the code like this? it seems quite weird since there is an ; at the end and a " after ='scale') . Thanks
"background-size" is not working on IE8.
http://caniuse.com/#feat=background-img-opts
This answer here https://stackoverflow.com/a/6353808/358906 is probably better than my original answer below.
In IE8, make sure the browser mode is set to IE8 Standards, if it's not, change it and see if it solves your problem. If it solves the problem then you will need to enfore IE8 to always use the I8 Standards mode either by using meta tags or server headers.
I have the following image in a sprite sheet and want to use it to style a button:
I have tried everything I can think of (even going as far as pseudo elements) but I can't get it to work. I had thought something like this should work:
.ui-button {
height:45px;
background-image: url(../button.png), url(../button.png), url(../media/button.png);
background-size: 8px 45px, 8px 45px, 3px 45px !important;
background-position: -63px -1px, -77px -1px, -73px -1px;
background-repeat: no-repeat, no-repeat, repeat;
}
but it doesn't. The background-size bits are the size of each chunk from the sprite sheet that I am using and the position is the top left coordinates of each part in the sprite sheet. Clearly I am doing something wrong. What?
Edit: here's the whole image:
Here is what I have tried with JSFiddle:
http://jsfiddle.net/Kpusc/
.ui-button {
height:45px;
width:18px;
background: url(http://i.stack.imgur.com/ipKrd.png);
background-position: -72px -1px;
background-repeat: no-repeat;
position:relative;
border:0;
}
.ui-button:before {
content:"";
display:block;
height:45px;
width:8px;
background: url(http://i.stack.imgur.com/ipKrd.png);
background-position: -64px -1px;
background-repeat: no-repeat;
position:absolute;left:0;top:0;
}
.ui-button:after {
content:"";
display:block;
height:45px;
width:8px;
background: url(http://i.stack.imgur.com/ipKrd.png);
background-position: -78px -1px;
background-repeat: no-repeat;
position:absolute;right:0;top:0;
}
Unfortunately I only could make it as wide as 34px. Since I can't make the center content to repeat itself.
I suppose you need to make the center part wider than at least 60px so that it could be applied as the .ui-button background-image (or perhaps make it as a separate file altogether, so it would be possible to repeat).
I'd like to know if there's another workaround though.
Thank you in advance for any help you can give. I am implementing sprites for the first time and am looking to streamline my code. Below is my css and html.
CSS
div[class^='Rating']
{
background:url('http://10.0.50.19/images/Ratings.png') no-repeat;
width:68px;
height:13px;
display:block;
}
.Rating0_5 { background-position: 0px 0px; }
.Rating1_0 { background-position: 0px -13px; }
.Rating1_5 { background-position: 0px -27px; }
.Rating2_0 { background-position: 0px -41px; }
.Rating2_5 { background-position: 0px -55px; }
.Rating3_0 { background-position: 0px -69px; }
.Rating3_5 { background-position: 0px -83px; }
.Rating4_0 { background-position: 0px -98px; }
.Rating4_5 { background-position: 0px -112px; }
.Rating5_0 { background-position: 0px -125px; }
HTML
<div class="Rating0_5"></div>
<div class="Rating1_0"></div>
....
The issue I am having is the background-position is always being set to 0px 0px as I believe the first style is overriding the background-position elements (according to Firebug). If I copy copy the background:url('http://10.0.50.19/images/Ratings.png') no-repeat; to each of the .RatingX_X styles it works fine but I don't want to repeat the background-image and repeat text if I don't have to. Hopefully this makes sense. Thanks again.
Define your first rule as:
div[class^='Rating']
{
background-image:url('http://10.0.50.19/images/Ratings.png');
background-repeat: no-repeat;
width:68px;
height:13px;
display:block;
}
and it should work.
On your background: you are not definin the position so it assumes it is on the default 0 0, and since your first selector is more specified as your background-position selectors it overrides.
The easiest and most cross-browser way would be to add a common class on your elements (<div class="Rating Rating0_5"></div>) and then simply change div[class^='Rating'] to .Rating.
Your other possible solution is to fix the selector specificity in your code.
Either use simply [class^='Rating'] or write your class selectors as div.Rating0_5.