background image need to fit the div

Question

I have a div which size may differ time to time.

At I set a background image to tat div which image size is fixed. But I need to fit the background image to div at any size.

How could be possible thro' CSS.

Thanks in advance!!!

Answer 1

It's not possible with CSS 2.x that's available in most browsers, but CSS 3 has introduced the background-size property. You can read details here: http://www.css3.info/preview/background-size/

Answer 2

The only way to change a size of an image with CSS is when it's an <img> element. I mean that you can do something like that:

img#myBG { width:200px; height:100px; }

If you need it to be a background, you should use 'z-index' and put your img under a the element that holds the content.

Something like this:

<div id="holder">
  <img id="myBG" src="...." />
  <div>my content here</div>
</div>

<style>
#holder { position:relative; width:200px; height:100px; }
#holder div { position:absolute; top:0; left:0; z-index:2; }
img#myBG { width:200px; height:100px;  { position:absolute; top:0; left:0; z-index:1;  }
</style>