I want to use CSS sprites on a web site instead of separate image files, for a large collection of small icons that are all the same size. How can I concatenate (tile) them into one big image using ImageMagick? ...
I'm trying add a tab to my web page that looks like this: Using this example as a basis, I've gotten it partially working. My case differs because I want the text section to be a fixed with, but the tail section to dynamically resize to take up the rest of the tab's container. It looks good in IE 6, but doesn't really take up the ful...
I have written code that automatically creates CSS sprites based on the IMG tags in a page and replaces them with DIV's with (what I thought was) appropriate CSS to position the sprite image as a background letting the appropriate part show through -- the problem is that I cannot get DIVs to behave as drop in replacements for IMGs. If...
I am using CSS Sprite Generator to create sprites for a web page I am working on, but it doesn't seem to work, and I don't know why...I guess it's something obvious but..! So, I picked up 3 images, zipped, generated the PNG file (I checked out the result it is seems fine) and I got the following css classes back: .sprite-welcom1 { back...
Hi, I just encountered this article of an extention of css sprites that enables the spriting trick with foreground images . I tried to use the technique on :hover but it doesn't appear to work in IE and Opera. See my attempt to use this technique for a menu here: http://www.kavoir.com/examples/jenny-css-sprites/menu.html On FF and Safa...
In one of the recent Stackoverflow podcasts, Jeff talked about having a single image file having all of those tiny images that are all over a page and then cutting it with CSS so that all the images get displayed correctly. The whole point is to reduce the number of server requests so that the page gets loaded faster. I was like "wow, th...
I'm trying to CSS use sprites to animate my Risk Matrix ... it works just fine in Firefox and Chrome, but image won't show up in IE ... The code is below, don't want to paste the whole thing in here, but the excerpt shows the pattern: <dl id="rmMap4x4"> <dd id="m4p4s1"> <a onclick="setDropDownListValues(4,1,3,4)" onmouseover="setDropD...
In CSS Sprites you will often find padding between each image. I believe the idea is so that if the page is resized then one image won't bleed into another. I think this depends on the different types of browser zoom (best explained by Jeff). However, I haven't been able to see this behaviour in my tests. Is this only a problem with o...
I got a quick question about sprites in css: Will I send two HTTP Request if I include the same image twice in a css file? For example if I want to load two different buttons from the same icon set image: .btn-1 { background:url('img/icons.png') 0 0; } .btn-2 { background:url('img/icons.png') 0 -60px; } or is there another wa...
I'm trying to understand how CSS sprites improve performance on a site? Why is the downloading of several small images slower than the download of a single image holding the smaller images if the total size of the single image is the sum of the smaller images? ...
Is it possible to create a text sprite and selectively display parts of the same HTML file and ignore the rest. The part to be displayed is selected by a menu generated generated using CSS with links within the same page. (The length of each section is unknown and expected to vary greatly). Communicating with the server is unfortunatel...
I'm implementing a CSS Sprites setup in my ASP.NET application based on this article.. http://weblogs.asp.net/zowens/archive/2008/03/05/css-sprite-for-asp-net.aspx In the section "Get the SPRITE already!"... the author says... "The only real down side to this is that all your images are lined up vertically. I'm not quite sure that thi...
Has anyone created a 'realtime' csssprite generator for .NET ? I want one or more directories of images that get loaded at runtime and the css is automatically generated. ...
I am trying to display a cropped center area of an image and have it work for different size images. I had success setting a fixed width for the div containing the image and using overflow:hidden property, this works the way I'd like it to except this only shows the leftmost part of the image and the right side is hidden. What I'd li...
We all know that CSS sprite images are great to reduce the amount of requests and such, but what about the performance of the browser rendering the page with several elements using a big image as a background? ...
Is the main purpose of sprites to reduce http requests made to the server for graphical elements on a page? Or do you want to try and fit as many elements to the sprite as possible. I guess what I'm asking is: when is the sprite too large? ...
I have a CSS image sprite and this renderes perfect in FF, also IE. The problem is the rendered image looks to have poor quality in IE. Has anyone encountered this before? How did you fix it? I need CSS sprites to save bandwidth and requests. .blackmncenter2 { float:left; height:32px; line-height:32px; background-imag...
I am now getting to the point that I want to sprite the images on www.trailbehind.com. Most of the images are loaded by JavaScript functions, and I have lots of little images such as the map icons. Is there any software that supports this? I know that you can use Django-sprites if your images are in Django templates. And you can use G...
Some users are reporting that my site is too slow And i think background images in css might be a possible culprit I have a site that uses a custom build system to concatenate all css, compress them ( yui compressor ) , make css sprites automatically ( smartsprites ) and I end up with a 9kb CSS for the whole page, this includes all cs...
Hello, I was originally using the following code: background-image: url(../images/tabbottom.gif); background-repeat: no-repeat; background-position: left bottom; The problem is when I convert it to a sprite, I have a fixed background-position, say 0px -400px; Now how do I place it at the left bottom then? Also, can I use background...