CSS background image for fluid layouts

Question

I am trying to apply a background-image to a li element.

<ul>
<li class="maintablink">&nbsp;</li>
</ul>

My CSS for the same is

li.maintablink{background:url(../images/tab_content.png) no-repeat left top;}

Even adding some width:200px;height:200px above does not work.

I am using HTML5 doctype

I have 2 questions related to this;

1. The background image is slightly bigger and does not display fully inside the li. i.e. it indirectly depends on the content inside my li element. I do not want to give any content inside li (except  ) How do I fix this issue ?

2. I am using fluid layout (everything in %, no px value)...So how do I give the width/height for this background-image...It should scale with the browser size (I know for page images, we use img{max-width:100%})...But how do I make background-images scalable ?

Answer 1

It sounds like you're looking for the CSS background-size property.

For a background that is scalable according to the size of the container:

background-size: auto;

For a background that is a fixed size, regardless of the size of the container or the actual background image:

background-size: 150px 200px;

You can also use percentages, or the keywords contain or cover.

See http://www.css3.info/preview/background-size/ for more info.

Please note that background-size does have quite good browser support now, but some older browsers (in particular IE8 and earlier, but also Firefox 3.x) do not support it.

If you need to support these browsers fully, you will need to work out a fall-back solution (probably using additional markup and/or Modernizr to determine whether the feature is available).