Anchoring Background-Image to Different Part of Container

Jamie Jackson

By default, background images are anchored to their containers at the
top left corner of both. Is there a way to anchor them to another
corner, say the top right corner of the container=the top right corner
of the background-image?

Thanks,
Jamie

Feb 12 '07 #1

Rik

On Mon, 12 Feb 2007 20:10:34 +0100, Jamie Jackson <my******@gmail.com
wrote:

By default, background images are anchored to their containers at the
top left corner of both. Is there a way to anchor them to another
corner, say the top right corner of the container=the top right corner
of the background-image?

CSS:

background-position: [ [<percentage| <length>]{1,2} | [ [top | center |
bottom] || [left | center | right] ] | inherit
So in your case:
background-position: top right;
--
Rik Wasmus

Feb 12 '07 #2

Jamie Jackson

On Feb 12, 2:18 pm, Rik <luiheidsgoe...@hotmail.comwrote:

On Mon, 12 Feb 2007 20:10:34 +0100, Jamie Jackson <mySpa...@gmail.com>
wrote:

By default, background images are anchored to their containers at the
top left corner of both. Is there a way to anchor them to another
corner, say the top right corner of the container=the top right corner
of the background-image?

CSS:

background-position: [ [<percentage| <length>]{1,2} | [ [top | center |
bottom] || [left | center | right] ] | inherit

So in your case:
background-position: top right;
--
Rik Wasmus

Thanks, Rik

Feb 12 '07 #3

Bergamot

Rik wrote:

>
background-position: top right;

That should be
background-position: right top;

The x-axis is always first.

--
Berg

Feb 12 '07 #4

Johannes Koch

Bergamot schrieb:

Rik wrote:

>background-position: top right;

That should be
background-position: right top;

The x-axis is always first.

No. See <http://www.w3.org/TR/REC-CSS2/about.html#property-defs>:

* A double bar (||) separates two or more options: one or more of them
must occur, in any order.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Feb 13 '07 #5

Bergamot

Johannes Koch wrote:

Bergamot schrieb:

>>
background-position: right top;

The x-axis is always first.

No. See <http://www.w3.org/TR/REC-CSS2/about.html#property-defs>:

* A double bar (||) separates two or more options: one or more of them
must occur, in any order.

Hmmm...
background-position: 50% 100%;

Maybe using keywords doesn't matter, but for numeric values it most
definitely does.

--
Berg

Feb 13 '07 #6

Johannes Koch

Bergamot schrieb:

Maybe using keywords doesn't matter, but for numeric values it most
definitely does.

Yes, see the production rule in Rik's post that you responded to.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Feb 13 '07 #7