Using background-size on inline-block in media queries


I am designing a responsive website and a list of links each have background images. The links are inline-block level elements.


<li id="tab3"><a href="#dinner" class="current">Dinner</a></li>


#tabs .nav li { display: inline; }
#tabs .nav li a {display: inline-block; width:165px; height:165px; line-height:160px;}
#tabs .nav li a.current{background: url(image) no-repeat -342px 0;}

At a certain breakpoint (600px), the size of the button gets smaller, so the background-image no longer fits properly. Typically, I would use background-size: 100% to make sure the background image fits to the size of its container. In this case, it is not working.

@media only screen and (min-width: 0) and (max-width: 600px){
  #tabs .nav li a{width: 136px; height: 136px; line-height: 131px; }
  #tabs .nav .current{background-size: 100%!important}

I set up a jsfiddle here so you can see. (you may need to stretch your browser wide to see it working without media queries)

There is one breakpoint at 600px. Above 600px you will see the background image behind the text. Below, it disapears. This is because I have set a background-size of 100%. For some reason, this removes the background image completely. Any idea how I can fix this?

Problem courtesy of: JCHASE11


At 100% of of the element, the background size becomes 136px wide, and your original background declaration moves it 342px to the left, which means none of it is visible in the element. I'm not sure what your ultimate intention is, but you'll have to change the background-position to get it to show up.

Solution courtesy of: freejosh


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.