CSS3: Background Image Size

Posted by on 1/03/2012
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.
Posted on
Labels:
Subscribe to our feeds

11 comments :

  1. Csseyah1/6/12, 10:38 AM

    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

    ReplyDelete
  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? 

    ReplyDelete
  3. Aj Banda1/11/12, 1:23 PM

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

    ReplyDelete
  4. Aj Banda1/11/12, 1:23 PM

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

    ReplyDelete
  5. Bagotilyo1/11/12, 1:23 PM

    thnks sa info kailngan kong pagaralan to ..hehehe

    ReplyDelete
  6. Csseyah1/11/12, 1:23 PM

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

    ReplyDelete
  7. Aj Banda1/11/12, 1:23 PM

    welcome. glad that I helped you sir jam :)

    ReplyDelete
  8. Aj Banda1/11/12, 1:23 PM

    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 :)

    ReplyDelete
  9. Henry1/11/12, 1:23 PM

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

    ReplyDelete
  10. Semidoppel1/11/12, 1:23 PM

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

    ReplyDelete
  11. Carlyn Sam2/13/12, 6:41 AM

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



    Neteffects- Computer Network
    Specialist

    http://www.neteffects.com.au

    ReplyDelete

Subscribe to: Post Comments ( Atom )