By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,492 Members | 1,987 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,492 IT Pros & Developers. It's quick & easy.

Anchoring Background-Image to Different Part of Container

P: n/a
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
Share this Question
Share on Google+
6 Replies


P: n/a
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

P: n/a
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

P: n/a
Rik wrote:
>
background-position: top right;
That should be
background-position: right top;

The x-axis is always first.

--
Berg
Feb 12 '07 #4

P: n/a
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

P: n/a
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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.