Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS setting size of image

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #36272
    Mahesha999
    Member

    Hi there I am learning CSS
    Just learned that unordered list can be used to create very good navigation links. I wanted to add images to these links. So the CSS I got in one book is to add image as background to the li.

    However the image I have is very big. Can I set the size of the image in background:
    ul li#skype a
    {
    background: #fff url(../Images/Skype.png) no-repeat top left;
    }

    Above Skype.png is very big and is displayed in cuts: http://img62.imageshack.us/img62/4596/78485056.png

    So is there any way to resize image in background of li (list item, not the webpage).

    #95245
    philip_mcl
    Member

    Stevencrader is right. When possible edit your photo in an image processor, giving it the appropriate dimensions.

    For the sake of learning however, there is a CSS3 property which allows you to play with “background-size”, however most legacy browsers won’t support this (read IE) and it’s not optimal for page performance.

    http://www.w3schools.com/cssref/css3_pr_background-size.asp

    #95247
    jamygolden
    Member

    @philip_mcl rather make use of verified documentation, such as Mozilla Developer Network.

    #95249
    Mahesha999
    Member

    Thanks. Actually that CSS3 background-size property is pretty neat. And works great on Chrome 10, IE9 and Firefox 8. Though it is not full-proof on old browsers. Reducing the image size is fine, but is it good. Image may pixlate when zoomed?

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.