Grow your CSS skills. Land your dream job.

How to keep website logo proportional to browser window size?

  • # June 22, 2013 at 9:53 am

    I need some help coding my site to keep the logo image in proportion to the browser window size. The logo is 330px x 200px which is the perfect size for a larger screen. However, as the browser window is shrunk the logo does not shrink accordingly and the menu bar disappears behind it.
    http://www.martindupuisphotography.com

    Here is the logo coding that came with the theme.
    /* ******************************
    4.1 Logo
    ******************************* */

    .logo {
    position:absolute;
    float:left;
    top:0;
    z-index:2;
    }
    .logo {
    width:330px;
    height: auto;
    }

    Anyone have any ideas on how to resolve this?

    Thanks

    # June 22, 2013 at 9:57 am

    Is that a real logo?

    # June 22, 2013 at 10:01 am

    the one on the site is…it’s my logo

    # June 22, 2013 at 10:14 am

    No right clicking…sigh!

    Try googling Responsive images.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".