Question

I am able to replace the #site-title text with a fixed-size image, no problem.

But now I would like to make it resize automatically based on the browser’s size, just like WordPresse’s header in Twenty Eleven.

FireBug tells me that the CSS responsible for that is:

#branding img {
    height: auto;
    margin-bottom: -7px;
    width: 100%;
}

But when I try copying this to the site-title:

 #site-title {
    text-indent: -9999px;
    width: 100%;  /* 980px;  width of the image file. */
    height: auto; /* 128px;  height of the image file. */

    margin: 0px 0 0 0;
    padding: 0em 0 0;
    background: url(images/header.png) white no-repeat;
    font-size: 1px;
    line-height: 1px;
    text-decoration: none;
}

This doesn’t really work: The site-title image stays the same original size.

Is there something else I need to do to create the “resizable magic” functionality that the new WordPress has?

Answer 1

For the image to resize, the parent element has to be resizable. If you take the twenty-eleven theme, the #page element doesn’t have a width though it has a max-width. Then width:100% for the image will make it resize according to the browser width.