glendon philipp baculio glendon philipp baculio - 4 months ago 27
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

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;
}