How to position a background image not fully to the right.

...in a flexible width container

[PublicSphere]

Is it possible to position a background image within a container so that it is positioned to the right with no repeat and so that there is a fixed amount of space between the right of the image and the right edge of the container?

E.G:

--------------
¦.................¦
¦...........img..¦
¦.................¦
¦.................¦
¦.................¦
--------------

(Dots denote space)

Where the container is flexible width. And where there are no additional tags used purely to achieve this objective.

[Fotiman]

According to the background-position [w3.org] section in the CSS spec, the allowable values are:

[ [ <percentage> ¦ <length> ¦ left ¦ center ¦ right ] [ <percentage> ¦ <length> ¦ top ¦ center ¦ bottom ]? ] ¦ [ [ left ¦ center ¦ right ] ¦¦ [ top ¦ center ¦ bottom ] ] ¦ inherit

Unfortunately, you can't get a fixed amount of space between the right of the image and the right edge of the container. The closest you can get would be to use percentages, which is unfortunate since you *can* set a fixed amount of space between the left (and top) of the image and the left (and top) edge of the container.

However, you might be able to get around this shortcoming by adding one more container element and adding padding to the outer container:

+-----------------------+ 
¦+------------+.........¦ 
¦¦............¦.padding.¦ 
¦¦.........img¦.........¦ 
¦¦............¦.........¦ 
¦+------------+.........¦ 
+-----------------------+ 

This may not work for you if you need other elements (text, etc.) to extend all the way to the right edge of the outer element.

[PublicSphere]

Only trouble is I can't touch the HTML, so I have no extra elements to play with.

I'm really struggling to get this working. Multiple background images would help but I don't think they will be available for a while.

[lavazza]

Maybe I'm missing some crucial point...

If not, I think this would work

#myContainerName {
background:#ff0 url(path/file-name.png) top right no-repeat;
}

using an image that has padding built in; i.e. top and right borders the same colour* as the background of the container

* and/or transparent

[Fotiman]

Yeah, lavazza, that would work. But obviously would require editing of graphics, which may not be desirable either. :)

[PublicSphere]

Yep that would work,

I was trying to avoid having to use javascript to get transparency working in =<ie6. However I think I will have to do that.

Although it is annoying that you can position a bg image left numerically but not right numerically. I think that is a 'gap' in CSS that needs to be filled.

I don't know how it would be expressed. I guess, background-position-right: 20px; background-position-bottom: 20px; for example?

[csuguy]

you can place it with a negative left value - effectively moving it right. And you can position background images so that they start off against the top-right corner. it doesn't work so well if you need to have an expandable image, but then you could use percentages for width, height, and padding.

[PublicSphere]

I can't believe I didn't think of that.

That is exactly what I need, thanks csuguy.

I use negative background positions all the time but never thought to use it for this purpose!

[csuguy]

No problem!

[lavazza]

What's the syntax for negative top and/or negative left values?

I have a vague memory of trying it once, ages ago, found that it didn't work in one or maybe even more of the common browsers and never persevered

[csuguy]

its the same as putting a positive value in - just stick a neg value in front of it:

left:-#px;
top:-#px;

I think there might be some bugs when using neg percentages, I can't remember. But using negative pixels should work on all browsers.

[Fotiman]

Keep in mind, you would need a really large image for this to work. Essentially, you would need an image that was as big as the container:

top: 0, left: 0 
.....+--------+ 
.....¦xox!~;o!¦ 
.....¦xox!~;o!¦ 
.....¦........¦ 
.....+--------+ 

top: 0, left: -2px 
.....+--------+ 
.....¦x!~;o!..¦ 
.....¦x!~;o!..¦ 
.....¦........¦ 
.....+--------+ 

[edited by: Fotiman at 2:28 pm (utc) on Aug. 14, 2008]

[csuguy]

You wouldn't need one if you had it positioned against the top-right corner ... would you?

For example:

#object
{
background-image: url(path) top right no-repeat;
left:-#px;
right:-#px;
}

?

[Fotiman]

Which styles are you referring to? I had assumed you meant the left and top of the background image, as in:

background-image: url(path) -#px -#px no-repeat;

But in your last post, it looks like you're referring to the position of the entire container #object. Is that what you meant it to be?

[csuguy]

Sorry - habit. That's the way I would do it personally - but ya your way is the way I meant to put.

Anyways - can't you simply put:

background-image: url(path) -#px -#px top right no-repeat;

?

I haven't messed with background images too much like this - but it seems logical that that would work unless there is some bug.

[csuguy]

ew... I was curious so I tried to do this test on my comp. Im using a older comp running XP with IE 6 and Mozilla FireFox 2... I couldn't even get 'background-color:red;' to work without making it an inline style... wdf!

The div to contain the image is absolutely positioned with a set width and height but it just expands horizontally 100% and vertically only up until the content I stick in it ends...

WDF

[Fotiman]

background-image: url(path) -#px -#px top right no-repeat;

As you found out, no, that does not work. :-) The "top" and "right" keywords are mutually exclusive to the pixel settings.

If you couldn't get the background color and absolute positioning to work, then it's probably a problem with your selector (that is, it probably doesn't match the actual element on your page).

[csuguy]

lol - I found the problem.... I feel like a class A idiot...

I put my style information in between two <script> tags >.<