Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    124
    Thanks
    7
    Thanked 0 Times in 0 Posts

    css background resize

    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.

    Code:
    .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??

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    84
    Thanks
    6
    Thanked 3 Times in 3 Posts
    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

  • #3
    New Coder
    Join Date
    Dec 2009
    Posts
    84
    Thanks
    6
    Thanked 3 Times in 3 Posts
    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

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •