-
201105 Sep
Posted in CSS3 Previews, Site Updates
Another new property introduced by the CSS3 Backgrounds and Borders module is
background-size
. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords;contain
orcover
.Browser support has grown of late, with the current versions of most popular browsers now supporting
background-size
, including Firefox, Safari, Chrome, Internet Explorer and Opera, without the need for vendor prefixes.You can skip to the end and leave a response.
-
Comments
-
01.
background-size:cover; will be very useful for those websites with full background images that need to scale when the browser window is resized while still maintaining the aspect ratio. Great addition to the spec!
-
02.
Brad Kemper says:Comment » September 6th, 2011 at 7:16 am
What is the current state of support inside the background shorthand, where it is supposed to be allowed after the background-position and a slash? It looks like neither webkit nor Mozilla allows it there yet.
-
03.
-
04.
-
05.
Multiple backgrounds! *-* I love you CSS3! *-*
-
06.
Nice tutorial, but the problem I have is that most of my target users are the elderly who run very old browsers. I will give it a try and see if it makes any difference though.
-
07.
Chris, thank you for the wonderful tutorial. Love the new, not that new anymore, wohoo!, background-size property.
Im itching to use this now!
-
08.
Awesome can’t wait to see some multiple background examples, should be some quality designs coming out soon :)
-
09.
Loving the new capabilities of CSS3, this as well as multiple backgrounds. Things are looking up with greater browser support.
-
10.
Of course it is a nice feature, but how many people will use it, it`s good to have, but I don`t see myself using it, as I barley even use any background that is not a color.
-
11.
Ahhh a nice, full screen backdrop without hacking or position attributes! Love it!
-
12.
Jesús Amozurrutia Silva says:Comment » October 6th, 2011 at 3:18 am
I have no comments about CSS because a don’t know it, but i heard and read in this site very good thinks. My question is if it’s free an I can have a copy? In this case, how can download one.
-
13.
I have no comments about CSS because a don’t know it, but i heard and read in this site very good thinks. My question is if it’s free an I can have a copy? In this case, how can download one.
- 14.
-
15.
Background size would certainly be useful. I just created a artificial flower website at http://www.bloomin.ch where I need to adjust the size of the background on the fly so I will try it there first. Always found manipulating bg’s a hassle in CSS, lets hope this changes things
-
16.
:cover looks pretty cool – not sure what I’ll use the :contain for though.
-
17.
-
18.
-
19.
-
20.
-
21.
-
01.