Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.

JavaScript / DOM / AJAX: Resizing page background according to the screen resoultion!

Bottom of Page

1 to 10 of 10

  1.  
  1.  permalink
    Hi! All
    I would like to re-size the background image of a web page to re-size and fit to the browser according to the screen resolution.
    Please help me with this.

    Thanks in advance.

    Cheers!
    Krishnam
    • CommentAuthordave_o
    • CommentTimeMay 3rd 2008
     permalink
    Hi Krishnam,

    I've found a post where a similar problem was discussed:
    http://cssbeauty.com/skillshare/discussion/2661/

    Dave
  3.  permalink
    Hi! Dave
    Thanks for the reference but its confusing.
    Did some one found the solution or is there solution for it?

    Krishnam
  4.  permalink
    Hi! All
    I did manage to get the background image scale according to screen resolution. http://www.krishnamraju.com
    But the code shows an error in IE. 1) Please help me rectifying it.

    This is not working on mac. 2) Please help.

    Thanks in advance.

    Please have a look at www.visitlondon.com, they have the resizing background. How to achieve that?

    Krishnam
    • CommentAuthordave_o
    • CommentTimeMay 4th 2008
     permalink
    Well, actually they don't. Their background is just centered, but not resizing. Is that the effect you would like to achieve?
  6.  permalink
    Hi! Dave
    Yes, i want the visitlondon effect (primary) but the important one is the resizing one.
    Did you see my site? www.krishnamraju.com, can the code be enhanced so that there are no errors.

    Please help.

    Thanks
    Krishnam
    • CommentAuthordave_o
    • CommentTimeMay 5th 2008
     permalink
    Hi Krishnam,

    The script you use is written ie exclusive ("...if(navigator.appName == 'Microsoft Internet Explorer')..."). If you want to make it work cross browser I would consider making my own script. I could help you, but first I need to understand your excat aim.

    You don't call rbOpen(); after your body, like is mentioned in the doc (point 4). Give it a try and tell me the result.

    Note: I've just outcommented the if clauses outcluding any other browser than ie and fortunately opera supports all the other commands. Now I see what you mean. However I would like you to give me an exact description of the effect you would like (resizing in which direction, under which conditions etc.) and I'll see what I can do.

    cheers Dave.
    Thankful People: a_krishnam_raju
    • CommentAuthorgogogob
    • CommentTimeMay 5th 2008
     permalink
    Allow me to share this tip...
    If you want to determine the precise dimensions of the *current* browser viewport excluding chrome, rather than the screen size, try the following *conditional* assignments in JavaScript, works in all browsers.

    var Widthvariable = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth
    var Heightvariable = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight

    For the problem in hand, I would make a selective choice from one of say three or four versions of the background image, centred, by either using a conditioned...
    document.write("style{document.body.style.backgroundImage='url('+chosenpic+')'}") in the head or a style assignment after window.onload...
    document.body.style.backgroundImage="url("+chosenpic+")"
    Thankful People: a_krishnam_raju
  9.  permalink
    Hi! Dave & Gogogob
    Thanks a lot for the your thoughts.

    Dave, I found that there is an error in the "disable select" JS file. I completely removed it and now there are no errors. I am happy with what's live right now.
    Dave, please help me with the script that is used on visitlondon.com, where the background stays as it is even if you re-size the browser. [oops! now they removed the background image ]

    Thanks a lot,

    Cheers!
    Krishnam
    • CommentAuthorgogogob
    • CommentTimeMay 6th 2008
     permalink
    Just saying sorry here for the dog's dinner I served up in my last post... very tired!
    Then, you know how to write a style definition, as do I, when I'm with it!

1 to 10 of 10

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page