...

View Full Version : css background resize



Duffman12
01-07-2010, 06:05 PM
So I have some icons. I assign them classes that contain the size and background image. The background image has 2 images in it on top of each other. one for the icon, and one for the hover state. So when you hover, i move the background image to the bottom. Pretty standard way to make hoverable things. eg.



.icon {
background: url("../img/icon.png");
width: 48px;
height: 48px;
}
.icon:hover {
cursor: pointer;
background-position: bottom !important;
}


So now I want the user to be able to resize the icons. I can assign it a new class and change the width/height, but the problem comes that my image is 48px x 96px. Do I need to have separate images for each icon size??

sir.jones
01-08-2010, 12:16 AM
Normally you should create separate icon size depend on various width/height you want, but also you can tricky it using javascript to scratch your icon width/height, this sub forum not for js place

sir.jones
01-08-2010, 12:26 AM
Normally you should create separate icon size depend on various width/height you want, but also you can tricky it using javascript to scratch your icon width/height, this sub forum not for js place

rnd me
01-08-2010, 12:43 AM
the latest browsers support "background-size" which let's you change the size of the image. I would make a new version of the icon, the largest icon you need. It looks better to shrink images than to expand them.

if you need it to work in all browsers, you'll have to make several image files.
one thing i've done is to use <img> tags, positioned behind the content, but that adds significantly to the complexity. Still, you can resize the img tags in css, so it works once you build it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum