As of CSS3, an easy way of stretching background images has been added. This can be used to make sure that your background images inside your containers (either of div or table) can be resized properly.

background-size: 100% auto;
-moz-background-size: 100% auto; /* for lower versions of Firefox */
-o-background-size: 100% auto; /* for lower versions of Opera */
-webkit-background-size: 100% auto; /* for lower versions of IE and Chrome */

The code above will work on the following:

  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+ (Opera 9.5 supported background-size but not the keywords)
  • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

Unfortunately, opera mini doesn't support this.


  1. isusunod ko ito sa pag-aaralan ko :) hehehe sana may seminar uli for css3 :) heheh may na-attenan kase ako sa UP for css2 :p

  2. Vimal Dwivedi1/10/12, 12:13 PM

    Thanks for this tutorial but is there any CSS3 code which will work for all browsers because  I don't know which browser my readers will use? 

  3. welcome po! :) sana po ay malaki maitulong nito sa inyo!

  4. welcome! actually nagamit ko lang ito bigla after masira yung template ko dito sa blog.. hahaha

  5. thnks sa info kailngan kong pagaralan to ..hehehe

  6. thanks sa CSS update na ito bro... wala pa ako gaanong background sa CSS3...

  7. welcome. glad that I helped you sir jam :)

  8. yeah, CSS3 is the latest as far as I know, it goes well with HTML5 which they said to be is the arch-enemy of Flash :)

  9. Na-meet lahat ng requirements ng PC ko, kelangan lang install at pagaralan ko to. CSS3 ba pinakabago?

  10. So that's how to do it, I've been planning to study CSS/HTML...thanks for this

  11. Thanks for sharing this CSS tutorial.. Looking forward for tutorials from you.

    Neteffects- Computer Network