Support » Installing WordPress » Changing image size in CSS depending on monitor resolution?

  • I’ve been editing a theme and have added a no-repeat image in the top left corner of the blog. This is fine in 1280×1024, but in 1024×768 it gets cut off a little by the text.

    The image itself is called by the style.css of the page, so I was wondering if there was any way to tell what monitor resolution someone was using, then either change or scale the image as required.

    Here’s the css that calls the background;

    body {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13px;
    margin: 0;
    padding: 0;
    color: #111;
    border-top: 3px solid #c1c1c1;
    background: url(logo_bg.gif) no-repeat;
    }

    Any suggestions?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Shameless Bump

    You’d need to use JavaScript to detect the window dimensions and to rewrite the particular style element (body background image) to suit. It can get a bit messy though, when users resize their windows.

    An example of this type of use of JavaScript (not my site) is here: http://rosenfeldmedia.com/ (though I’ve seen simpler examples).

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing image size in CSS depending on monitor resolution?’ is closed to new replies.