I have a sprite image set as the background of an element on my page, but how do I find the proper offsets so I can actually see it on the screen?
When you build your sprite image in your graphics program you have to write down the offsets for each element and use those in your CSS.
You can use a tool like this and get background positions of the icons in the sprite.
You need to first upload your image, then select an icon from the sprite. CSS will be generated, just copy the generated CSS and use it in your class.
It will generate CSS styles like this, you need to include that in your CSS class
background-position: -213px -135px;
width: 97px;
height: 65px;
There are web tools that will create the sprite and give you CSS with positions for you. http://css-sprit.es/ is an example.
The online CSS Sprite Generator is worth looking into, it should take some of the tedium out of this approach.
The main thing to remember is that the offsets will be negative. If you have an image that's 100x500 with 100x100 sprites, then the offsets will be:
.img1 { background-position: 0 0; }
.img2 { background-position: 0 -100px; }
.img3 { background-position: 0 -200px; }
.img4 { background-position: 0 -300px; }
.img5 { background-position: 0 -400px; }
Since empty areas of a png file takes up very few bytes, just put all "images" at a regular interval, say every 50 or 100 pixels. That way you can simply find the first proper value and remove 50/100 pixels from that (50 ctrl-x in vim).
Related
I have a sprite that I want to use defining a class to and not an id:
I want to use the white one to show expansion option and black one to show expanded state. For non expanded state I have a class sprite-right and want to use sprite-expanded for expanded state. Can anyone guide me through this? I forgot pasting what I did...duh!
sprite-right
{
overflow:hidden;
width:16px;
height:20px;
cursor:pointer;
background:transparent no-repeat 0 0;
background-image:url('../images/arrows.gif');
}
It's pretty simple to set up. You first need to set a class for applying the image as a background. Then add specific classes for each icon. Then in your CSS you change the background position, height and width to match the location of each icon. Here is an example:
.icon {
background-image: url('path/to/image.png');
display: block;
}
.icon.sprite-right {
background-position: 0 0;
height: 10px; // You can change these for each sprite
width: 10px; // You can change these for each sprite
}
.icon.sprite-expanded {
background-position: -10px 0;
}
.icon.sprite-right:hover {
background-position: -20px 0;
}
.icon.sprite-expanded:hover {
background-position: -30px 0;
}
Then, as you add new sprites you simply adjust the position until you can see the icon and then adjust the height and width until you are not clipping the image.
There are many great tutorials out there if you do a Google search. I use this tool alot when dealing with simple sprites.
Check out this link: http://labs.engageinteractive.co.uk/nav-o-matic/
Here is a codepen I forked so I can understand sprites a little better.
http://codepen.io/daugaard47/pen/lntzE
Study the code and it will start making sense to you.
Use background positioning to move your sprites to the desired class/state.
Hope this helps a little.
This post should help : http://mindthesemicolon.com/using-css-sprites/
It explains how to create and use sprites, with a code pen example.
I'm first-time using Compass spriting. I wanted to have icons images (all are in little different in sizes) centered position. like the attached image
I'm using this setting
$icons-spacing:40px;
#import "icons/*.png";
#include all-icons-sprites;
the css i'm getting is (for example)
.icons-adventure {
background-position: 0 -608px;
}
It's not that as I required. I want to give more spacing from top and left.
You may want to check out this Github Gist: https://gist.github.com/adamlogic/3577147, which has helped me fix spriting issues in the past and also gain a better understanding of how spriting in Compass works.
Of particular interest to you may be the portion where the author mentions the following: (pasted here in case the Gist is removed)
"I took this a bit further by defining my own (sprite) mixin."
$spritemap-spacing: 50px
#import "spritemap/*.png"
=background-sprite($name, $repeat: no-repeat, $offset-x: 0, $offset-y: 0)
background-image: $spritemap-sprites
background-repeat: $repeat
+sprite-background-position($spritemap-sprites, $name, $offset-x, $offset-y)
// if no offsets given, set the dimensions of the element to match the image
#if $offset-x == 0 and $offset-y == 0
+sprite-dimensions($spritemap-sprites, $name)
"and how I'm using it"
// simplest case; sets the background image and dimensions of the element
h3
+background-sprite(ribbonfull)
// custom offset; does not set the dimensions of the element
h2
+background-sprite(ribbonend, no-repeat, 3px, 22px)
// repeating backgrounds are possible, too
#positions
+background-sprite(doubleline, repeat-x, 0, 45px)
And, the author's generated CSS:
h3 {
background-image: url('/images/spritemap-sb826ca2aba.png');
background-repeat: no-repeat;
background-position: 0 -405px;
height: 29px;
width: 295px; }
h2 {
background-image: url('/images/spritemap-sb826ca2aba.png');
background-repeat: no-repeat;
background-position: 3px -296px; }
#positions {
background-image: url('/images/spritemap-sb826ca2aba.png');
background-repeat: repeat-x;
background-position: 0 -751px; }
I’ve found two workarounds for this issue, both not perfect:
You can simply save the icon in your image editor with the necessary padding - it works if you want to use it only in one place, otherwise you have to create duplicates (which is why this doesn't always work).
Other solution is to use pseudoelements. Assuming is the element you want to add the background to and you’ve placed your icons in icons folder:
#import "icons/*.png";
el {
position: relative;
}
el:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
#include icons-sprite(some_icon);
margin-top: - round(icons-sprite-height(some_icon) / 2);
margin-left: - round(icons-sprite-width(some_icon) / 2);
}
$icons-spacing defines the number of pixels that separates each image in the generated sprite map. I believe you want to adjust the $icons-position which adjusts (offsets) the generated background-position styles
First off, a good question...
When you give sprites in CSS, you will be able to generate classes with the .image-name. And this is how Compass sprites work. Your image will be appended to a big sprite image, and all the irregular images will be clubbed together in a grid manner.
Even though $icons-spacing gives you the ability to give some padding to the grid, it won't be that easy for you to put it in this case. So, going ahead with what is generated, we will do the following.
So, if you want something like the picture, you need to center the element, which has the Compass generated class.
Now say, you have adventure.png in it and it has generated this class:
.icons-adventure {
background-position: 0 -608px;
}
Now, if you want to make this centered, you can make this way.
<div class="border">
<i class="icons-adventure"></i>
</div>
And for the border class, give padding. So, what I mean here is, you have wrapped the .border on the .icons-adventure. Now, you need to give some padding and width to it.
.border {padding: 15px; width: 40px;}
Here, there's is no need of height, as the height is automatically taken care. Let me come with a fiddle for you to get a clear explanation.
If you know the size of your icon you could set a default height for all icons and give single icons an vertical offset of (default height - icon height)/2 and position horizontal with center:
$sprite-spacing: 50px;
#import "compass/utilities/sprites";
#import "sprite/*.png";
#include all-sprite-sprites;
$sprite: sprite-map("sprite/*.png", $spacing: 50px);
#include sprite-sprite(myicon);
#include sprite-background-position($sprite, myicon, center, 12px);
If you are using Bootstrap 3 just use the following code, its simple and clean,
SASS File
#import "compass";
$home-spacing : 10px;
$home-sprite-dimensions : true;
#import "web/images/home/*.png";
#include all-home-sprites;
And in the HTML/Slim File I just use the center-block provided by Twitter Bootstrap 3, My HTML helper,
=content_tag('div','',:class=>'home-save_money center-block')
Basically it just center align the images into the center of the div, all the answer above use some custom Mixins or a hack.
PS: Even if you dont use twitter bootstrap, just use the following CSS, that would do the trick,
display: block;
margin-left: auto;
margin-right: auto;
I hope this helps some one,
I'm new to CSS and I'm trying out image spriting in CSS. I have an sprite map at present. There are multiple CSS files which are cascaded from my main CSS using #import. Each of these CSS files defines the layout for various components. I need only one call to be made to my sprite image hence I need to play around with background-position.
Could anyone tell me a way such that I make only one call to my image and the rest of the CSS files just manipulate the position?
You will need to work with multiple classes.
In the first class (lets call it .sprite) you have to define the background-image.
.sprite {
background: transparent url(path/to/image) no-repeat 0 0;
height: 16px;
width: 16px; //assuming you are using this size for your icons...
}
Now you will have to define another class for every sprite image you will be using.
For example, you have an magnifier-icon, you will add a class .sprite .magnifier and there you will have to define your background-position.
.sprite.magnifier {
background-position: 45px 30px;
}
Now in your HTML you just call for <div class="sprite magnifier"></div> and your image will just one time loaded.
There are various sprite generators. Or you can create your own using some kind of image manipulation software.
You'll want to save all the images in one layout as a .png (generally) with sufficient spacing between elements.
Then depending on your individual needs you can set the background of say all elements, to be your sprite, but this would potentially cause problems.
It's far better to say ~
ul.foo li {
background:url(my-sprite.png);
}
ul.foo li.home {
background-position:0 10px;
}
ul.foo li.about {
background-position:10px 20px;
}
and style individual elements as required. The sprite will still be only loaded once.
You should not use sprites for lots of large images either - best suited for icons, buttons etc. See YouTube, Google, Stack Overflow for good examples.
Give your elements the same class of sprite then override them:
.sprite { background: transparent url(../images/sprite.png) no-repeat top left; }
.add_icon { background-position: 20px 60px; }
.next_icon { background-position: 40px 60px; }
<div class="sprite add_icon"> etc.
and so on..
I've decided to crate a sprite sheet for my entire site (+-30 images) so I can load 1 image and just reference positions, which reduces image load time and server calls.
My question:
Is it possible to reference an image in the sprite sheet and then size that image to 100% of its parent container?
So For example:
#SomeDiv
{
background: url("/Content/Images/SpriteSheet.png") -125px 0 no-repeat;
width:100px;
}
The width of my div is 100px, but the sprite I want to reference is 20px(for example) - how can I streth the extracted sprite to grow to 100px?
Regards,
Byron Cobb.
Well, if you really want an answer, sure, why not. See: http://jsfiddle.net/3dsgn/3/
Basically we're working with CSS3 here, so IE support (except 9) is non-existent. You'll also have to use the version with the -moz- extension for Firefox 3.6 and below. The technique itself is also somewhat troublesome. You actually have to go and calculate the numbers yourself - percentages won't work, naturally.
#sprite-large {
/* All of these numbers are 2x their normal,
though tweaked slightly so that they will look okay */
width: 36px;
height: 36px;
background: url('url/to/your/image.png') -38px -112px;
-moz-background-size: 448px 368px;
background-size: 448px 368px;
}
I am familiar with CSS techniques to replace text with an image. For example, here are 9 of them: http://css-tricks.com/nine-techniques-for-css-image-replacement/
Are there any techniques for replacing images? Is there anyway to set the background of an image to an image and then hide or move the foreground of the image (the image src element).
I am trying to write a skin for a site that has an image that I want to replace. Thanks.
From how I understand it he's trying to do this in pure CSS, with no changes to HTML or JavaScript.
That is correct. I am adding a new stylesheet to an existing page. Let say I can not modify HTML or utilize javascript.
After a little bit of tinkering, I figured it out!
img.someclass {
background: url("NEW IMAGE URL") top right;
height: 0;
width: 0;
padding: 200px 550px 0 0; /* Insert actual image size (height width 0 0) */
}
This will make the height and width of the actual image 0, but will expand the box to fill the size of the image with padding. The only downside to this is it won't look perfect in older versions of Internet Explorer.
If you have an element surrounding the image, e.g. a DIV, you should be able to set a background image (along with no-repeat and a position) on it, then set the image to display:none.
Alternatively, here's a haphazard solution that seems to work. It positions the image off-screen, then uses the :after pseudo-element to set a background image. It should be workable, but you'll need to fiddle with the values to get it working right. It won't work in IE6 though.
<style>
img.test {
background: url('image_to_show.png') no-repeat right top;
position: relative;
left: -16000px;
}
img.test:after {
content: ".";
color: transparent;
display: block;
width: 16000px;
}
</style>
<img class="test" src="image_to_hide.png">
The best way to replace images is to set the background position. First create the two different images and put them one above the other in the same image. Say your skin element is 50x50 pixels, you'd create a 50x100 image.
Then use some code like this:
.skinElement1 {
background: #fff url("image.png") no-repeat 0 0;
}
.skinElement2 {
background: #fff url("image.png") no-repeat 0 -50px;
}
So to view the second image you move the background up by the required amount. You could either use javascript or your server-side code to set the appropriate class.
Maybe you can set an opacity of an element and then set the background to the image you want.
Musicfreak: I meant using TWO elements.
you will have assign different classes for the two states then write some javascript to have the image change upon an event.
for example:
.firsImage { background:transparent url(/images/someImage.jpg) no-repeat; }
.secondIMage { background:transparent url(/images/image2.jpg) no-repeat; }
HTML:
<div id="imageDiv" class="firstImage"> some content </div>
<a onclick="changeImage()">Change the image!</a>
Javascript:
function changeImage(){
var imageDiv = document.getElementById("imageDiv")
if ( imageDiv.className === "firsImage" )
document.getElementById("imageDiv").className = "secondImage"
else
document.getElementById("imageDiv").className = "firstImage"
}