glendon philipp baculio glendon philipp baculio - 1 year ago 107
CSS Question

How to adjust width of image on assigned width?

My image doesn't fit with the width. The image is there but does not display properly? This is my fiddle. My problem is on the 4th child.

This is my code:

nav li:nth-child(4){
background: url('https://ssl.gstatic.com/gb/images/v1_76783e20.png') no-repeat -38px -664px;
width: 12px;
height: 12px;
text-indent: 100%;
opacity: .55;
}


I tried
background-size: cover
, but it doesn't work.

Answer Source

Change the width/height from 12px to 16px and background position to -33px -578px / 80px auto

Updated fiddle

nav li:nth-child(4){
    background: url('https://ssl.gstatic.com/gb/images/v1_76783e20.png') no-repeat -33px -578px / 80px auto;
    width: 16px;
    height: 16px;
    text-indent: 100%;
    opacity: .55;
}