0

How to stretch or fit a background image using css attribute background in a class. I am using a icon in li and want to fit on specific width. but it not render.

HMTL code.

<ul>
   <li class="social-bg-facebook">F</li>
   <li class="social-bg-twitter">T</li>
   <li class="social-bg-user">U</li>
   <li>UN</li>
</ul>

i am using these classes to fit background in li

CSS code.

.icon-list li {
    margin:0px;
    padding:0px;
    position: relative;
    top: -36px;
    left: 5px;

}
.icon-list li.social-bg-facebook {
    background:url(images/facebook.png) no-repeat;
    width:35px;
}
.icon-list li.social-bg-twitter {
    background:url(images/twitter-icon.png) no-repeat;
    width:35px;
}
Mohammed Javed
  • 866
  • 2
  • 9
  • 24
  • possible duplicate of [Stretch and scale CSS background](http://stackoverflow.com/questions/376253/stretch-and-scale-css-background) – misterManSam Aug 21 '14 at 10:14

1 Answers1

1

You can use background-size:

.icon-list li.social-bg-facebook {
    background:url(images/facebook.png) no-repeat;
    background-size: 100% 100%;
    width:35px;
}
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • all is right i got a answer in css background properties .icon-list li.social-bg-facebook { background:url(images/facebook.png) no-repeat; `background-size:cover;` `background-size:contain;` width:35px; } `background-size:cover;` `background-size:contain;` use one in these – Mohammed Javed Aug 21 '14 at 10:21