RE: [css3-background] background-position relative to other corners

On 22 Nov 2007 Bert Bos wrote:

> > Re: http://www.w3.org/TR/2005/WD-css3-background-20050216/
<snip>
> 
> But even the positioning relative to other edges than top and left is no 
> longer needed since we decided to add calc() to CSS. That wasn't an 
> easy decision, because calc() is not easy to work with (and a real 
> challenge for a WYSIWYG editor), but its power is such that it removed 
> the need for several other things, such as extensions to 
> the 'background-position' property.


Is there other properties in CSS3 that has calc() or is it only for background-position?


> > When I made my initial proposal I had in the back of my mind the
> > situation when all four background positions top, right, bottom and
> > left could have use values other than auto. The result would be to
> > stretch or shrink a background image along it's horizontal and/or
> > vertical axis depending on the intrinsic dimensions of the image. In
> > the current draft this is what background-size does but in the
> > reverse way. My alternative acting somewhat like a block element and
> > background-size acting like a inline element.
> >
> > So I will state my thoughts as an alternative and give comparisons of
> > how it relates to the current draft specs for background-position and
> > background-size with the use examples from the draft.
> 
> I inserted some comments below, but on the whole I think it is an 
> interesting idea. It avoids the need for one new property at the cost 
> of a more complex syntax for another. The more complex syntax isn't 
> very difficult to explain ("you either specify the position of the top 
> left corner or both the top left and the bottom right"). But the 
> question is what is easier and more common in practice, specifying two 
> corners or one corner plus a size?
> 
> One argument for a separate size property is that the position is not 
> relevant at all for most cases of repeated background and especially of 
> repeated backgrounds when the size is rounded down to fit.


I have been playing around with CSS styled unordered list menu with corner radius on the anchor links. Each <a> has a gradient background image which is repeated. Currently the background image extends right under the border and rounded corners thus showing outside the rounded corners. Now there is background origin and with that I can set the background image to begin from the border edge instead, but even doing this depending on the radius of the rounded corners the background image could still be showing. I would not want it to begin from the padding edge. So here is one use case.


> Another argument is that the question "how do I set the size of the 
> background image?" is so common that providing the 
> obvious 'background-size' property can save people a lot of time.
> 
> One argument for your model is that the case of an image at a certain 
> distance from all sides requires no use of calc().
> 
> Another is that it corresponds roughly to how margins and absolute 
> positioning work.


This is how I see it. I still have to think before I use background-position. Which is my x and y axis? Having an extension that is similar to how margins and absolute positioning work is beneficial but I see that more importantly it relates to how borders work (four sides must be given). With border-image also in CSS3 they could work well together. 


> > a) If I want and background image to be rendered 10% from each edge
> > of an element or the background-origin and have the horizontal and
> > vertical axis of the image stretched or shrunken depending on the
> > intrinsic width, height and ratio of the image, I propose that this
> > can be used.
> >
> > background-position:10% 10% 10% 10%;
> > background-repeat:no-repeat;
> >
> > Currently from what is in the specs I could have used.
> >
> > background-position:10% 10%;
> > background-size:80% 80% round;
> 
> Actually, I think that would be
> 
>     background-position: 50% 50%;
>     background-size: 80% 80%;
>     background-repeat: no-repeat;


After seeing your correction it really made me think. Positioning with percent starting from 0% and going up by steps of 10% to reach 100% requires 11 steps. It easily understood why 50% centers an image but what happens when 10% or 20%, 30% or 40% is used. I had to do a test to work this out beginning from 0% with 10% steps up to 100%.

http://css-class.com/test/css/colorsbackgrounds/background-position2.htm

The first background image at 10% is in real terms only 9% from the containers edge. So 10% of the background image sits to the left of the vertical axis (of 10%) and 90% of the background image sits to the right of the vertical axis. At 50% each side of the background image is now 50% percent on either side of the vertical axis. Background-size is perfect for this approach because the image is indeed 80% wide and not 82% which it would have to be using my four positions model. I would suggest that an image is used in the specs to demonstrate that background-position 10% (or other value) places the background image 9% from a containers edge.


> > b) If I want a background image to be rendered 100px from each edge
> > of an element or the background-origin and have the horizontal and
> > vertical axis of the image stretched or shrunken depending on the
> > intrinsic width, height and ratio of the image,  I propose that this
> > can be used.
> >
> > background-position:100px 100px 100px 100px;
> > background-repeat:no-repeat;
> >
> > This works regardless of if the element is of fixed or fluid width or
> > height. A simulated test case, please use IE to check as this test
> > requires the quirksmode IE box model.
> >
> > http://css-class.com/test/css/colorsbackgrounds/position-length.htm
> >
> > Currently the draft specs does not allow for this even if positioning
> > from the right or bottom edge. It is only possible to center a
> > background image which is positioned from an element's (top, right,
> > bottom or right) edge in pixels if the element is of fixed width or
> > height.
> 
> Calc() can solve this case:
> 
>     background-position: 100px 100px;
>     background-size: calc(100%-200px) calc(100%-200px);
>     background-repeat: no-repeat
> 
> Bert
> -- 
>   Bert Bos                                ( W 3 C ) http://www.w3.org/


If the background was given to the body element using the above rules with calc(). Over the width of a 1280 viewpoint the right and bottom edge of the background image would move backs and forwards by initially 10px upon resizing of the viewpoint down or move backs and forwards by finally 10px when resizing of the viewpoint up.

1280-80px(scrollbar etc)-100px-100px=1000px divided by 100% = 10px

I believe that my model should not include percentage as background-size is ideal for this but for situations with background position in pixels with a fixed or fluid width box my model is possibly simpler.

Alan
http://css-class.com/

Received on Monday, 3 December 2007 22:55:14 UTC