CSS3 - background-size

Since today morning was working on setting a good template for this blog. The problem was the current template had a width of 700 px. It had a div and a background image with width 700 px. Now that look awfully thin on my 1280 x 1024 LCD screen. So wanted to extend it to 800 px.

So here is how it looked like in the css:

#main-top {
width:700px;
height:56px;
background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top left;
margin:0px;
padding:0px;
display:block;
}


Simply I extended its width to look like:

#main-top {
width:800px;
height:56px;
background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top left;
margin:0px;
padding:0px;
display:block;
}

The div got extended with the background color. The problem was that the image was of width 700 px which did not get extended and hence started my R&D.

CSS provides the img with two attributes to stretch the image namely width and height and they are implemented well both on IE and FF. The problem is div:background does not support width or height attributes.

So I first went through google to find any similar problem being reported in any of the forums/groups. Got a few but most were questions but with no elegant answers. They were mostly hacks in the line of http://www.htmlite.com/faq022.php . Most of them created 2 divs: one to host the image with z-index lower than the other div hosting the text. This does not seem to be a good solution to me and was not convinced that CSS (being a well known standard) does not implement such a thing.

So went to w3.org for CSS background and got a new property called 'background-size' and tried it out but it did not work. Neither in IE nor in FF. Thats bad. So looked into google again for more information and got to know that its only implemented in Konqueror (Thanks to KDE guys to implement is in KHTML hence it got into Apple Safari/Webkit).

So what to do.. remove the background image totally and it looks plain simple and better.