SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display of background image -- different sizes

    Hello,

    is there a way using javascript to display a background image in different sizes depending upon the users screen size without having several different sizes of the same image. for example: i have a background image that is 1420x710, this displays perfect on my screen that is set to 1440x900. however it will not display correctly on a screen size smaller or bigger than 1440x900. i dont want "20" different sizes for the same image. i can detect the screen.width and screen.heigth, no problem. just how do i load the image to a smaller or bigger screen size. IE: 800x600 or 1280x768, etc.... without having lots of different size images of the same image?

    thanks,
    john....

  2. #2
    SitePoint Addict MadDog's Avatar
    Join Date
    Aug 2002
    Location
    Oregon, USA
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no that (that i know of) to set a background image width/height without using complex div tags and z-index.
    Drew Gauderman
    ASP/MSSQL/AJAX-Javascript/HTML/CSS Coder
    iPortalX The most secure FREE ASP portal!

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    on my webpage i have 20 backgrounds that are loaded at random each time the webpage is refreshed. this is the <body> statement that i use to display the randomly selected background image:

    <script language="JavaScript">document.open(); document.write("<body background = '" + bgimage + "' text = '" + text_color + "'>");</script>

    "bgimage" is variable where the selected image is held and with the "background" statement it is loaded. the random number is selected from an external .js file, and that number is used by another external .js file to pick which image will be displayed. with the background image selected how can the above statement be changed to display the background image with the screen.width and screen.heigth of the users browser window. example: one user has a browser window of 1280x800 and another has a browser window size of 1360x768. the same image loads and is resized to the demintions of the users browser window.... all my backgrounds images are 1420x710.... as you can see have 4 to 10 different sizes of the same 20 images is not what i want.

    thanks,
    john....

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    No javascript is required as it makes for a poor solution.
    Just use css for the best effect.

    Code css:
    body {
      overflow: hidden;
    }
    #img.source-image {
    	width: 100&#37;;
    	position: absolute;
    	top: 0;
    	left: 0;
    }

    Remove the image from the body background and use an image with a class of "source-image" instead.
    Last edited by paul_wilkins; Aug 5, 2008 at 13:41.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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