Difference between background-position and background-origin.

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Difference between background-position and background-origin.

Arup Rakshit
Hi,

I am not able to understand the difference between background-position
and background-origin. Would you guys help me to understand this with
a suitable example ?


Thanks,
Arup


Reply | Threaded
Open this post in threaded view
|

Re: Difference between background-position and background-origin.

fantasai
On 08/14/2015 03:36 AM, Arup Rakshit wrote:
> Hi,
>
> I am not able to understand the difference between background-position
> and background-origin. Would you guys help me to understand this with
> a suitable example ?

background-position specifies a position within a box
   http://www.w3.org/TR/css3-background/#the-background-position

background-origin specifies which box to use for the positioning
   http://www.w3.org/TR/css3-background/#the-background-origin

See http://www.w3.org/TR/css3-background/#introduction for an illustration
of the various boxes.

Let me know if, after reading the spec, it's still unclear.

~fantasai

Reply | Threaded
Open this post in threaded view
|

Re: Difference between background-position and background-origin.

Simon Fraser-4
> On Aug 14, 2015, at 1:31 PM, fantasai <[hidden email]> wrote:
>
> On 08/14/2015 03:36 AM, Arup Rakshit wrote:
>> Hi,
>>
>> I am not able to understand the difference between background-position
>> and background-origin. Would you guys help me to understand this with
>> a suitable example ?
>
> background-position specifies a position within a box
>  http://www.w3.org/TR/css3-background/#the-background-position
>
> background-origin specifies which box to use for the positioning
>  http://www.w3.org/TR/css3-background/#the-background-origin
>
> See http://www.w3.org/TR/css3-background/#introduction for an illustration
> of the various boxes.
>
> Let me know if, after reading the spec, it's still unclear.

It’s a shame that background-origin was so-named. An origin is a point, but background-origin is about which area to use. Perhaps background-area or background-box would have been better names.

Perhaps we could alias this property to a new one with a less confusing name?

Simon


Reply | Threaded
Open this post in threaded view
|

Re: Difference between background-position and background-origin.

fantasai
On 08/14/2015 07:01 PM, Simon Fraser wrote:
>
> It’s a shame that background-origin was so-named. An origin is a point,
> but background-origin is about which area to use. Perhaps background-area
> or background-box would have been better names.

We asked for better names multiple times, and nobody suggested any. :(

One problem with background-area and background-box, btw, is that we also
have the background-clip property which is also a kind of background area/box.

> Perhaps we could alias this property to a new one with a less confusing name?

I think at this point it's too late to be worth bothering with. If it was
really super messed up and we had a much better alternative (like word-wrap,
which we renamed to overflow-wrap), it might be worth it. But I think it's
not too terrible.

~fantasai

Reply | Threaded
Open this post in threaded view
|

Fwd: Difference between background-position and background-origin.

Arup Rakshit
---------- Forwarded message ----------
From: Arup Rakshit <[hidden email]>
Date: Tue, Aug 18, 2015 at 9:39 PM
Subject: Re: Difference between background-position and background-origin.
To: fantasai <[hidden email]>


On Sat, Aug 15, 2015 at 10:03 PM, fantasai
<[hidden email]> wrote:

> On 08/14/2015 07:01 PM, Simon Fraser wrote:
>>
>>
>> It’s a shame that background-origin was so-named. An origin is a point,
>> but background-origin is about which area to use. Perhaps background-area
>> or background-box would have been better names.
>
>
> We asked for better names multiple times, and nobody suggested any. :(
>
> One problem with background-area and background-box, btw, is that we also
> have the background-clip property which is also a kind of background
> area/box.
>
>> Perhaps we could alias this property to a new one with a less confusing
>> name?
>
>
> I think at this point it's too late to be worth bothering with. If it was
> really super messed up and we had a much better alternative (like word-wrap,
> which we renamed to overflow-wrap), it might be worth it. But I think it's
> not too terrible.
>
> ~fantasai
>

Hi,

I am very new, I don't able to understand how to follow and read the
specs correctly. I am currently reading from
http://www.w3.org/TR/2011/REC-CSS2-20110607/#minitoc . But I don't see
the links you have given are part of the specs I am reading. What is
the standard documentation which I should follow ?


Arup

Reply | Threaded
Open this post in threaded view
|

Re: Fwd: Difference between background-position and background-origin.

fantasai
On 08/18/2015 09:10 AM, Arup Rakshit wrote:
>
> I am very new, I don't able to understand how to follow and read the
> specs correctly. I am currently reading from
> http://www.w3.org/TR/2011/REC-CSS2-20110607/#minitoc . But I don't see
> the links you have given are part of the specs I am reading. What is
> the standard documentation which I should follow ?

Well, in an ideal world, you could visit
   http://www.w3.org/TR/CSS/
However, we've not updated that in awhile due to ongoing discussions
about the prefixing policy. (Not something for you to worry about.
But hopefully from next year it will be up to date.)

In the meantime, the best place to access all of the CSS specs is here:
   http://www.w3.org/Style/CSS/current-work

~fantasai

Reply | Threaded
Open this post in threaded view
|

Re: Difference between background-position and background-origin.

Sebastian Zartner-3
In reply to this post by Arup Rakshit
On 18 August 2015 at 18:10, Arup Rakshit
<[hidden email]> wrote:

> ---------- Forwarded message ----------
> From: Arup Rakshit <[hidden email]>
> Date: Tue, Aug 18, 2015 at 9:39 PM
> Subject: Re: Difference between background-position and background-origin.
> To: fantasai <[hidden email]>
>
>
> On Sat, Aug 15, 2015 at 10:03 PM, fantasai
> <[hidden email]> wrote:
>> On 08/14/2015 07:01 PM, Simon Fraser wrote:
>>>
>>>
>>> It’s a shame that background-origin was so-named. An origin is a point,
>>> but background-origin is about which area to use. Perhaps background-area
>>> or background-box would have been better names.
>>
>>
>> We asked for better names multiple times, and nobody suggested any. :(
>>
>> One problem with background-area and background-box, btw, is that we also
>> have the background-clip property which is also a kind of background
>> area/box.
>>
>>> Perhaps we could alias this property to a new one with a less confusing
>>> name?
>>
>>
>> I think at this point it's too late to be worth bothering with. If it was
>> really super messed up and we had a much better alternative (like word-wrap,
>> which we renamed to overflow-wrap), it might be worth it. But I think it's
>> not too terrible.
>>
>> ~fantasai
>>
>
> Hi,
>
> I am very new, I don't able to understand how to follow and read the
> specs correctly. I am currently reading from
> http://www.w3.org/TR/2011/REC-CSS2-20110607/#minitoc . But I don't see
> the links you have given are part of the specs I am reading. What is
> the standard documentation which I should follow ?

The CSS 2.1 specification is in big parts superseded by different CSS
3 specifications. In this case the discussion is about the 'CSS
Backgrounds and Borders Module'.[1]
There is also a list of all published CSS 3 module specifications
available including their current status.[2]

Sebastian

[1] http://www.w3.org/TR/css3-background/
[2] http://www.w3.org/Style/CSS/current-work.en.html