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.
Related
I'm sure there is an easy answer to this one...
Using Twitter Bootstrap, I have this in my style.css.erb file:
.login_page body {height:100%;
max-width:inherit;
margin:0 20px;
background-image: url(<%= image_path 'oap_dotlogo.png' %>);
background-repeat: no-repeat;
background-position: 5%, 80%;
background-color: #E3F5FD;
}
That is great, except on a phone where the background logo is a pain in the ass. I'd like to drop that logo on a phone.
I see that bootstrap-responsive.css already defines the .hidden-phone:
#media (max-width: 767px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
So, how do I modify the style.css.erb so that the background-image tag has the .hidden-phone class?
I've tried a few permutations of adding .hidden-phone in the style.css.erb but nothing seems to work - I must have the syntax wrong.
Thanks!
Dave
Sounds like you're confusing CSS and HTML here. When you say:
[H]ow do I modify the style.css.erb so that the background-image tag has the .hidden-phone class?
... you can't add a class to a CSS declaration. You don't actually want to hide your element (the body in this case), rather at small screen sizes you want to modify the background property. So, within the media query that you already have, add this:
#media (max-width: 767px) {
.login_page body { background-image: none; }
...
all your other small-screen styles
}
Then, the default will be to show your background-image and you are removing it for small screens. If the image is large, you might consider a mobile-first approach. i.e. do the opposite, as #po228 mentioned - only add the background-image for larger viewport widths.
Looks like you were very close. To define styles that won't be displayed on a phone you need to use min-width, not max-width. Try the following:
#media only screen and (min-width: 768px) {
.login_page body {
background-image: url(<%= image_path 'oap_dotlogo.png' %>);
background-repeat: no-repeat;
background-position: 5%, 80%;
}
}
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.
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?
I want to use the following style in GWT client bundle:
.myClass tr:hover {
background: url("myImage.png") 185px 2px no-repeat;
}
I declared the image as follows:
#Source("resources/myImage.png")
#ImageOptions(repeatStyle = RepeatStyle.None)
ImageResource myImage();
and changes the style to:
#sprite .myClass tr:hover {
gwt-image: "myImage";
background-position: 185px 2px;
}
But it does not work. There are several images in the generated XYZ.cache.png. So if I change the background-position in firebug I see the complete image bundle.
How can I move the background image to the right position?
#sprite .myClass tr:hover {
gwt-image: "myImage";
}
div.myClass tr:hover{
background-position: 185px 2px;
}
As you noticed, gwt-image will be default remove 'background-position' along with some other ones. To override the default position of 0 0, add a more specific css rule with the position you desire.
The generated width property of ImageSprite does not work because the width of tr element is fix. It is better zu create a td with an image element (as ImageResource) on the right side of table row. CSS looks like:
<code>
div.myClass img {
visibility: hidden;
}
div.myClass tr:hover img {
visibility: visible;
}
</code>
So solution assumes there are no more images in the table.
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.