For some reason, I am not entirely sure why, but the following is not working. The background position simply stays the same on hover. I cannot figure out why. I could do it another way, but I would like to try and get to the bottom of why it does not work. #nav a:link, #nav a:visited { background:url(../img/nav-sprite.png) no-repe...
I mean, using css sprites on non static content like: Inside while(mysql_fetch_array())... ...
Hi, There are two image sprite techniques. The "classic" version uses the background and the background-position css properties. (as it's described here http://www.alistapart.com/articles/sprites) The "second" version uses an image tag and its clip css property. ( http://css-tricks.com/css-sprites-with-inline-images/) My question is t...
I am receiving some strange begaviour in IE6 when printing a page. For some reason it is printing out parts of a CSS background image sprite. I have overridden all background-image declarations with: * {background-image:none !important;} But to no avail. I didn't think background images were supported by default anyways so this is a...
I have 3 different images and want to create a sprite using CSS. I understand that will reduce HTTP requests. However, I am totally new to this concept and have no idea as to how to approach this. What would be best bet for me? Also I have seen there are some CSS sprite generators where you submit a .zip of images and it combines the...
Can you bottom repeat a sprite background where I want the sprite to be set of the background on the bottom of the div. I have this: .statistics-wrap { margin-top: 10px; background: url(../img/bg-sprite.png) repeat-x 0 -306px bottom; overflow: hidden; border: 1px #BEE4EA solid; border-radius: 5px; -moz-border-rad...
Hello all I am trying to include css sprites in my webapp. The thing is I have arranged my website background vertically in sprite image. Now, one portion of the sprite needs to be repeated vertically. I was trying the following code... #page-wrapper { margin: 0px auto; background-image: url(../images/background.png); heig...
If this is a question that shouldn't be on SO, please let me know. Has anyone tried the website: http://csssprites.org/ To autogenerate and use CSS Sprites? What are your thoughts? I'm thinking about implementing (constantly looking for new ways to improve performance) ...
Hello all I am trying to work with CSS Sprites for my webapp. Here is my web layout.. <div id="container"> <div id="header" /> <!-- part of CSS sprite --><br /> <div id="content" /> <!-- repeats vertically, separate image --> <br /> <div id="separator"> <!-- part of CSS sprite --><br /> <div id="footer"> <!-- part of CSS sprite...
Hello all I am trying to create to a vertical navigation menu using CSS sprites. I want to put in it a hover effect where the menu option slides out a bit. a:link { background: url(images/nav.png); background-position: -100px 0px; width: 150px; } a:hover { background: url(images/nav.png); background-position: -100px 0px; w...
Is it possible to use three images in CSS sprite navigation? This may be like this If its possible what will be the result? ...
Can we use more than 2 images for single navigation. That means when we hover on that image it will shows 6 different images. Is it possible to make for a single navigation image? If possible means how? I think you are all understand this ...
I have a transparent PNG that partially overlaps a button. The buttons becomes inactive where the image overlaps. Is there a way to turn the transparency "off" so the button is clickable behind it? Or are there any other tricks that might fix this problem? ...
I'm working on an app that uses ControlTemplates to produce images dynamically. I need to create a unique XAML ControlTemplate that works as a css-sprite containing all other ControlTemplates XAML. Is it possible to include ControlTemplate XAML inside another ControlTemplate and keep the aggegated and individual files separated? ...
I'm using the css sprite technique to hold all the buttons on the site in one PNG Image. This technique works fine on all browsers on your normal Style Buttons, however for IE 7/8 it shows a border and a red x on any input where I use a css class to define the image. This technique works fine for Firefox. Am I missing something here ?...
Is there a way to create a single css-sprite from multiple XAML ControlTemplates? I have several ControlTemplates and I want to combine all those images into a single XAML file and then create a single css-sprite. Thanks in advance. ...
What's the best way to align icons (left) and text (right) or the opposite text on left and icon on right? Does the icon image and text have to be the same size? Ideally I would like them to be different but be on the same vertical alignment. I am using background-position css property to get the icons from a larger image. Here is how...
I'm trying to elegantly solve a styling issue with some buttons and images. My goal is to have buttons that look like the following: (Hacky mspaint mockup) However, I have a set of criteria I'd like to meet: I also need to be able to have the icon image exist as a button alone, with no text (i.e. the button background is the icon i...
I have asked this before but couldn't get it resolved, so asking again. I am trying to align icons (on the left) from a vertical sprite with text (on the right). I would like both text and icons bottom to be aligned regardless of the size of the icon and the text i.e. the text could be h1 or could be a h5. The icon size remains largely ...
I'm using -webkit-border-image to specify my main sprite image in a style. The sprite image is a bunch of button images. What style attributes do I use to index into my main sprite image? .red { -webkit-border-image: url(sprite.png) 0 14 0 14; } The red button sprite is at x=0, y=21. What attributes do I use? If it were a backg...