I have got set in CSS that some image is background, and when it is over with I want to repeat or I want to continue with other image
something like this:
ul.smenu .menu_tlacidlo:hover {
background:url(images/sluzby_menu_btn_hover_2.png);
background-repeat: "url(images/sluzby_menu_btn_line.png)";
width:142px;
height: 22px;
}
Is there way to do it?
Related
I'm writing a browser game and need help with sass and background images.
I have a world with terrain (grass, water) and entities (player, monster). This is rendered in a big html table and each td gets data-attributes assigned.
<td data-y="5" data-x="23" data-terr="1" class=""></td>
<td data-y="5" data-x="24" data-terr="0" class="player"></td>
Based on those attributes the css then applies the correct images.
table td {
padding: 0;
background-size: 100% 100%;
image-rendering: pixelated;
&[data-terr="0"] {
background-color: #060;
background-image: url(#{$spritedir}/grass.png);
}
&[data-terr="1"] {
background-color: #666;
background-image: url(#{$spritedir}/water.png);
}
&.player {
background-image: url(#{$spritedir}/hero.png);
}
}
Now the problem is that the field where the player class is applied, the player overrides the background-image and the terrain vanishes.
But i want to stack the images. Like this:
background-image: url(#{$spritedir}/grass.png),
url(#{$spritedir}/hero.png);
Is this possible with css/sass? I mean without listing every terrain/entity combination.
I'm new to advanced CSS and I've been following this tutorial for generating sprites using gruntjs, spritesmith and less. I'm stuck on how to solve the following problem. Firstly, I generate a .less file containing the information of each image inside the sprite. It looks something like this:
#mobile_logout-x: 1586px;
#mobile_logout-y: 0px;
#mobile_logout-offset-x: -1586px;
#mobile_logout-offset-y: 0px;
#mobile_logout-width: 256px;
#mobile_logout-height: 256px;
Using grunt-contrib-less I can now use the following to get the sprite into my target css:
Less template
.mobile_logout {
.sprite(#mobile_logout);
}
Result
.mobile_logout {
background-image: url(images-mobile/mobile-sprite.png);
background-position: -1586px 0px;
width: 256px;
height: 256px;
}
This would be fine if I wanted to use this directly in the HTML, but I'd like to specify this as part of another CSS class. An example would be:
.myTestButton {
background-image: url(images-mobile/mobile-sprite.png);
background-position: -1586px 0px;
width: 256px;
height: 256px;
color: white;
background-size: 1.3em 1.3em;
background-position: top right;
}
The problem is at this stage I can't find a way to get the width and height to be represented as background-width and background-height, which is where I am looking to get to.
I've tried changing the values in the sprite.less file to match what I'm looking for, but have found that was a hack that didn't work. Another option I have been considering is having a mixin to return the correct item with the width translated, but because these are generated from less I couldn't get that to fly either.
Just after posting this I looked into where the sprite function came from and found my answer in the generated sprite.less file:
.sprite-width(#sprite) {
width: ~`"#{sprite}".split(', ')[4]`;
}
.sprite-height(#sprite) {
height: ~`"#{sprite}".split(', ')[5]`;
}
The sprite.less file is generated using a mustache template. In order to solve my problem in Spritesmith you can specify a mustache template. It was also incorrect that I was looking at background-width and the property I needed was background-size. My attempts at inlining also failed, and I should have been looking at using a div rather than sizing the sprite component.
I'm in the midst of creating a SASS mixin that will let me take a spritesheet of social media icons and display them, but I'm having an issue with the background-position when it's hovered over, here's the SASS code:
#mixin social-button($imgurl,$xpos,$ypos,$height,$width) {
background-image: url($imgurl);
background-position: $xpos $ypos;
display: block;
float: left;
height: $height;
width: $width;
&:hover {
background-position: 0px -$height;
}
& span {
position: absolute;
top: -999em;
}
}
And my include:
a.facebook {
#include social-button("../img/social-buttons.png",0px,0px,26px,26px);
}
If you'd like to see/use the spritesheet in action, I've uploaded it here: http://i49.tinypic.com/2evtbwp.png
Here's the HTML as well:
<a class="facebook" href="#"><span>Facebook</span></a>
Essentially the CSS output for the hover is displaying as this:
a.facebook:hover {
background-position: -26px;
}
And in Firebug it displays as this:
a.facebook:hover {
background-position: -26px center;
}
Any help is greatly appreciated, I'm pretty stumped on what I'm doing wrong at this point.. thanks!
PS. I'm going to be creating 5 of these, so I wouldn't mind creating a loop that could auto generate that for me, but at the present time it's not a huge deal, just need to get the hovers working first!
You have to add parentheses around variables when you change them to negatives otherwise it just does the math (0px - $height):
background-position: 0px (-$height);
You probably want to fix the 0px, too.
Basically I am trying to to make a forum made using MyBB look more personalized from the current theme. Currently the theme I have is using a 1 pixel wide 100 pixels and is using the following code to repeat that accross the background off the header to give it a gradient look:
background: #202020 url(images/1/header.png) top left repeat-x;
What I'm looking to do is have a scrolling images there. To make sure it's 100% clear check out this link and look at the header.
Click to be Taken to Example
So basically how do I do pretty much exactly what they have done on that page with a scrolling images?
Edit: If it helps at all here is the link to the site. I'm making it for a friend:
Click
Edit2: Logo's full css looks like this:
#logo {
background: #202020 url(images/1/pan.jpg) top left repeat-x;
border-bottom: 1px solid #000;
text-align:center;
}
Try something like this: (see it working here)
The HTML:
<div id="header">header</div>
<div id="content">content</div>
The CSS:
#header {
width: 100%;
height: 321px;
background: url(http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg) 0 0 repeat-x;
}
The JS:
var banner_width = 512;
var banner_x = 0;
function moveBanner() {
banner_x = (banner_x - 1) % banner_width;
$('#header').css('background-position', banner_x + 'px 0');
}
setInterval(moveBanner, 50);
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Best Way to Sprite Images?
I have the following image that I want to use for users to log into site.
http://dl.dropbox.com/u/7468116/facebook_signin.png
However I am not able to make css work properly.
.sprite {
background-image: url("pathto/facebook_signin.png");
background-position: 0 0;
}
.sprite:hover {
background-position: 0 16px /*or whatever the y position of the 2nd button is*/
}
.sprite:active {
background-position: 0 32px /*or whatever the y position of the 3rd button is*/
}
Something like this should work:
a.fb {
display: block;
background: ("/path/to/sprite.png") 0 0 no-repeat; /* start with normal state */
width: 150px;
height: 18px;
text-indent: -9999px; /* for image replacement */
}
a.fb:hover,
a.fb:focus {
/* hover and focus state */
background-position: 0 -20px;
}
a.fb:active {
/* click state */
background-position: 0 -40px;
}
If you are on mac, you can use some tools for writing your CSS file automatically. These tools are ordering your sprites in an effective way and also writes CSS files for you. You don't need to fight with ordering and calculating pixel coordinates, etc. I
suggest Sprite Master.
What exactly's not working in your CSS? Spriting is involves changing the background position of the image on hover (or other states).
So it's really just
#element {
background-position-y: 10px;
}
#element:hover {
background-position-y: 0px;
}
Would be helpful to see your CSS.