Search code examples
htmlcssbackground-position

Why isn't background-position working?

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.

Solution

  • 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.