Changing image size in CSS depending on monitor resolution? (3 posts)

  1. Nudger
    Posted 9 years ago #

    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 1280x1024, but in 1024x768 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?

  2. Nudger
    Posted 9 years ago #

    Shameless Bump

  3. pcmt
    Posted 9 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic