Results 1 to 2 of 2

Thread: Resizing certain pictures on a page when displayed on a lower resolution monitor

  1. #1
    Join Date
    Aug 2013
    Thanked 0 Times in 0 Posts

    Default Resizing certain pictures on a page when displayed on a lower resolution monitor


    I'm not sure if CSS is the best room for this, but in my searches online for a fix for my problem I've seen various types of solutions (including CSS based), though none exactly like mine.

    A little background so you can understand the method to my madness.

    To implement text shadow in IE, I used a Javascript based solution. It worked to my satisfaction except if there is centered text (set with CSS), the writing would look horrible.

    I came up with a solution of not using the CSS centering on the text, but instead using an image that is the same color as my background to do it. I placed this before the text, set it to the necessary width, and voila - centered text, with the Javascript based text shadow looking fine on those lines as well. I had designed the site with a container/header/etc. width of 960px, figuring on at least a 1024px width display resolution, with a coordinating color filling out the sides.

    I tested the site today on a library computer that ended up not having these lines of text centered, where instead the text was slightly biased right. The odd thing was, one of the lines centered by this method still looked OK, but the other two were askew. Odd.

    That led me to try and see if I can conditionally set the size of these "background" color images ONLY on the troublesome lines (not the whole page, or even anything else in it) to automatically resize if the display resolution is sensed to be is too low.

    Is there some way to do this, so I can place whatever needed code just around these as needed, leaving the rest of my site's coding unaffected?

    Thanks in advance - I hope I'm writing this clearly/correctly!

  2. #2
    Join Date
    Aug 2009
    Thanked 7 Times in 7 Posts


    Quote Originally Posted by Martin717 View Post
    To implement text shadow in IE, I used a Javascript based solution.
    Actually instead of using JavaScript or images you could just do something like this

    #element {  
        filter: glow(color=black,strength=5), alpha(opacity=70);
    instead of having the javascript center the shadowed text.

    Also what browsers did you use to test? Were the the same ones? Is there any sample code or photos to show us so we can help better?
    Last edited by FrickenTrevor; 09-26-2013 at 11:52 AM.
    An inline div is a freak of the web and should be beaten until it becomes a span

Similar Threads

  1. Replies: 14
    Last Post: 03-05-2013, 10:56 AM
  2. Lower image resolution make it load faster
    By jzhang1013 in forum JavaScript
    Replies: 0
    Last Post: 05-02-2009, 01:58 PM
  3. Replies: 6
    Last Post: 07-23-2008, 08:31 AM
  4. Replies: 5
    Last Post: 11-21-2007, 09:12 PM
  5. Changing image header with Resolution of monitor
    By toplisek in forum Graphics
    Replies: 2
    Last Post: 01-26-2006, 04:21 PM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts