Re: [css-d] Box Model and Background-image
John wrote: In the CSS box model, are background images understood to occupy the same height and width as the outer edge of the border area? thank you John No, this is only true for background-color which covers the whole border box, whatever it's dimensions. For background-image, the image can only occupy the same height and width of the border box if the image has a background-size (in both x and y axis) of 100% and the value for background-origin is border [1]. Please remember that a box could have a border or not have a border. The absence of a border means the context box and border box are the same and any reference would be to the border box when pertaining to background. The same applies with a box without padding. The absence of padding and a border means the padding box, context box and border box are the same and any reference would be to the border box when pertaining to background. 1. http://css-class.com/test/css/backgrounds/background-origin1.htm -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Box Model and Background-image
In the CSS box model, are background images understood to occupy the same height and width as the outer edge of the border area? thank you John __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Box Model and Background-image
Ar 12/11/10 22:53, ysgrifennodd John : In the CSS box model, are background images understood to occupy the same height and width as the outer edge of the border area? thank you John Border inner edge, isn't it? I.e. content + padding. Could be wrong, though. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Box Model and Background-image
In the CSS box model, are background images understood to occupy the same height and width as the outer edge of the border area? I believe it is the border box (content + padding + border) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Box Model and Background-image
Ar 12/11/10 23:10, ysgrifennodd Thierry Koblentz : In the CSS box model, are background images understood to occupy the same height and width as the outer edge of the border area? I believe it is the border box (content + padding + border) -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz You're absolutely right. I stand corrected. From w3schools: Definition and Usage The background-image property sets the background image for an element. The background of an element is the total size of the element, including padding and border (but not the margin). I'm going to have to play now to see if a border overlays a background image or /vice versa/. Just as I was thinking about calling it a day for today! Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Box Model and Background-image
Ar 12/11/10 23:21, ysgrifennodd Peter Bradley : I'm going to have to play now to see if a border overlays a background image or /vice versa/. Just as I was thinking about calling it a day for today! Yup. If you have a background colour and a dotted or dashed border, you can see the colour behind it. W3C says: Authors may specify the background of an element (i.e., its rendering surface) as either a color or an image. In terms of the box model http://www.w3.org/TR/CSS2/box.html#box-model, background refers to the background of the content http://www.w3.org/TR/CSS2/box.html#box-content-area, padding http://www.w3.org/TR/CSS2/box.html#box-padding-area and border http://www.w3.org/TR/CSS2/box.html#box-border-area areas. Border colors and styles are set with the border properties http://www.w3.org/TR/CSS2/box.html#border-properties. Margins are always transparent. [http://www.w3.org/TR/CSS2/colors.html] Interesting. You learn something every day. Cheers Peter -- http://www.peredur.net __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Box Model and Background-image
On Nov 13, 2010, at 8:10 AM, Thierry Koblentz wrote: In the CSS box model, are background images understood to occupy the same height and width as the outer edge of the border area? I believe it is the border box (content + padding + border) No, the default is the padding-box: http://www.w3.org/TR/css3-background/#the-background-position which leads to http://www.w3.org/TR/css3-background/#background-positioning-area or, for CSS 2.1 http://www.w3.org/TR/CSS21/colors.html#propdef-background-position most clearly worded under length. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
