Why isn't background-position working?

Question

I don't often use background-position, so maybe I'm not doing this correctly, but my css rule is not taking effect.

background-position:right 353px bottom 20px;

Here's the code:

HTML

<h1> 
    <a href="#">
        <img src="/images/silver-corner-logo.jpg" id="site-title" />
    </a>
</h1>

CSS

h1 {
    width:80%;height:154px;
    min-width:353px;
    margin:0;padding:0;
    text-align:right;
    background-color:#A8A9AD;
    background-image:url("/images/top-left.jpg");
    background-repeat:no-repeat;
    background-position:right 353px bottom 20px;
}
#site-title {
    margin:0;padding:0;
    display:block;
    width:353px;
    float:right;
}

EDIT

It Occurs to me that maybe I should describe what it is I am trying to accomplish.

Within my h1, I have a logo (width 353).
The h1 may become larger than 353 depending on the screen size.

In this case I want a background image to display to adjacent (left) to the img so that it will nicely fade into the solid background color.

Answer 1

What browser are you using? Four values for background-position is only supported in a couple of them (Firefox, Chrome and Safari do NOT support it). Documented here.

Answer 2

That's not the proper syntax for background-position , as indicated by this documentation .

right and bottom do not have numeric arguments, but stand alone.

Answer 3

background-position: right 353px bottom 20px;

It is confusing, following shows how to use background:position.

Optionsof position

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

If you only specify one keyword, the other value will be "center"

x% y%   

The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%