miércoles, 19 de enero de 2011

3.9. The background-size’ property - w3.org






3.9.
The
background
size
property


3.9. The background-size’ property


background-size’ property

Name: background-size
Value: <bg-size> [ , <bg-size> ]*
Initial: auto
Applies to: all elements
Inherited: no
Percentages: see text
Media: visual
Computed value: for <length> the absolute value, otherwise as specified
Specifies the size of the background images. Where 

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

Values have the following meanings:
‘contain’
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
‘cover’
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
[ <length> | <percentage> | auto ]{1,2}
The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be ‘auto’. A percentage is relative to the background positioning area. An ‘auto’ value for one dimension is resolved by using the image's intrinsic ratio and the size of the other dimension, or failing that, using the image's intrinsic size, or failing that, treating it as 100%. If both values are ‘auto’ then the intrinsic width and/or height of the image should be used, if any. If the image has neither an intrinsic width nor an intrinsic height, its size is determined as for ‘contain’. Negative values are not allowed.
Here are some examples. The first example stretches the background image independently in both dimensions to completely cover the content area: 
 
div {
 background-image: url(plasma.png);
 background-repeat: no-repeat;
 background-size: 100% 100%;
 background-origin: content-box }
The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved: 
 
p {
 background-image: url(tubes.png);
 background-size: 50% auto;
 background-origin: border-box }
This example forces the background image to be 15 by 15 pixels: 
 
para {
 background-size: 15px 15px;
 background-image: url(tile.png)}
This example uses the image's intrinsic size. Note that this is the only possible behavior in CSS level 1 and 2. 
 
body {
 background-size: auto; /* default */
 background-image: url(flower.png) }
The following example rounds the height of the image to 25%, down from the specified value of 30%. At 30%, three images would fit entirely and a fourth only partially. After rounding, four images fit. The width of the image is 20% of the background area width and is not rounded. 
 
p {
 background-image: url(chain.png);
 background-repeat: no-repeat round;
 background-size: 20% 30% }
If ‘background-repeat’ is ‘round’ for one (or both) dimensions, there is a second step. The UA must scale the image in that dimension (or both dimensions) so that it fits a whole number of times in the background positioning area. In the case of the width (height is analogous):
If X ≠ 0 is the width of the image after step one and W is the width of the background positioning area, then the rounded width X' = W / round(W / X) where round() is a function that returns the nearest natural number (integer greater than zero).
This will round to the nearest whole number of tiles, which keeps closer to the intended size and, in the case where one dimension is fixed (e.g. in ‘border-image’), keeps the image closer to the intended aspect ratio. This is almost certainly the best solution for vector images and high-resolution raster images. However, if the given image is a low-resolution raster image, it will require interpolating pixels, which can look bad. See Rounding Extremes for illustrations. The workaround is to specify a higher-resolution image (e.g. by shrinking with ‘background-size’ or ‘border-image-width’). Possible spec solutions include introducing a separate keyword that always scales down, or to change the algorithm so that we force scaling down when interpolation would be required for scaling up. The CSSWG is looking for feedback on this issue.
If ‘background-repeat’ is ‘round’ for one dimension only and if ‘background-size’ is ‘auto’ for the other dimension, then there is a third step: that other dimension is scaled so that the original aspect ratio is restored.
In this example the background image is shown at its intrinsic size: 
 
div {
 background-image: url(image1.png);
 background-repeat: repeat; /* default */
 background-size: auto } /* default */
In the following example, the background is shown with a width of 3em and its height is scaled proportionally to keep the original aspect ratio: 
 
div {
 background-image: url(image2.png);
 background-repeat: repeat; /* default */
 background-size: 3em } /* = '3em auto' */
In the following example, the background is shown with a width of 3em or slightly smaller, so that it fits a whole number of times in the width of the background. The height is scaled proportionally to keep the original aspect ratio: 
 
div {
 background-image: url(image3.png);
 background-repeat: round repeat;
 background-size: 3em auto }
In the following example, the background image is shown with a width of 3em and a height that is either the height corresponding to that width at the original aspect ratio or slightly less: 
 
div {
 background-image: url(image4.png);
 background-repeat: repeat round;
 background-size: 3em auto }
In the following example, the background image is shown with a height of 4em or slightly less, so that it fits a whole number of times in the background height. The width is the width that correspond to a 4em height at the original aspect ratio or slightly less: 
 
div {
 background-image: url(image5.png);
 background-repeat: round;
 background-size: auto 4em }
If the background image's width or height resolves to zero, this causes the image not to be displayed. (The effect is the same as if it had been a transparent image.)
See the section “Layering multiple background images” for how ‘background-clip’ interacts with other comma-separated background properties to form each background image layer.

Fuentes - Fonts
SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font
free counters Disculpen las Molestias
Conceptos Hinduistas (1428)SC |



Conceptos Hinduistas (2919)SK  ·  (2592)SK
Aa-Ag · Ah-Am · Ana-Anc · And-Anu · Ap-Ar · As-Ax · Ay-Az · Baa-Baq · Bar-Baz · Be-Bhak · Bhal-Bhy · Bo-Bu · Bra · Brh-Bry · Bu-Bz · Caa-Caq · Car-Cay · Ce-Cha · Che-Chi · Cho-Chu · Ci-Cn · Co-Cy · Daa-Dan · Dar-Day · De · Dha-Dny · Do-Dy · Ea-Eo · Ep-Ez · Faa-Fy · Gaa-Gaq · Gar-Gaz · Ge-Gn · Go · Gra-Gy · Haa-Haq · Har-Haz · He-Hindk · Hindu-Histo · Ho-Hy · Ia-Iq · Ir-Is · It-Iy · Jaa-Jaq · Jar-Jay · Je-Jn · Jo-Jy · Kaa-Kaq · Kar-Kaz · Ke-Kh · Ko · Kr · Ku - Kz · Laa-Laq · Lar-Lay · Le-Ln · Lo-Ly · Maa-Mag · Mah · Mai-Maj · Mak-Maq · Mar-Maz · Mb-Mn · Mo-Mz · Naa-Naq · Nar-Naz · Nb-Nn · No-Nz · Oa-Oz · Paa-Paq · Par-Paz · Pe-Ph · Po-Py · Raa-Raq · Rar-Raz · Re-Rn · Ro-Ry · Saa-Sam · San-Sar · Sas-Sg · Sha-Shy · Sia-Sil · Sim-Sn · So - Sq · Sr - St · Su-Sz · Taa-Taq · Tar-Tay · Te-Tn · To-Ty · Ua-Uq · Ur-Us · Vaa-Vaq · Var-Vaz · Ve · Vi-Vn · Vo-Vy · Waa-Wi · Wo-Wy · Yaa-Yav · Ye-Yiy · Yo-Yu · Zaa-Zy

GENERAL
Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Correo Vaishnava

Mi foto
Correo Devocional

Archivo del blog