Resizing background using CSS and Javascript according to screen resolution

Discussion in 'Javascript' started by Seige, Jun 19, 2006.

  1. Seige

    Seige Guest

    Ever had headache when you can't resize the background width using CSS:
    body{
    background: url(/images/bg.jpg) ;
    background-width: 800px;
    }

    It won't work, would it? Of course not, it's not even defined in CSS.
    So, let's try to work it out using Javascript:

    There are two methods, first method you prepare plenty of different
    width images, classifying them into 640, 800, 1024, 1280, 1600 and
    whatever other sizes. Then you use javascript to detect screen width
    and you're done. Easy but not exactly what I'm looking for.

    Second method: create a layer (for the background image) to go beneath
    the existing content and resizing the image according to the screen
    width.

    bgimg = document.createElement("bgimg");
    bgimg.src = "/images/bg.jpg";
    st = {
    position:"absolute",
    zIndex:"-10",
    width:screen.width,
    top:"0",
    left:"0"
    }
    for( s in st ){
    img.style = st;
    }
    document.body.appendChild(bgimg);
    Seige, Jun 19, 2006
    #1
    1. Advertising

  2. Seige

    Randy Webb Guest

    Re: Resizing background using CSS and Javascript according to screenresolution

    Seige said the following on 6/19/2006 1:40 PM:
    > Ever had headache when you can't resize the background width using CSS:


    Nope, can't say that I have.

    > body{
    > background: url(/images/bg.jpg) ;
    > background-width: 800px;
    > }
    >
    > It won't work, would it? Of course not, it's not even defined in CSS.
    > So, let's try to work it out using Javascript:
    >
    > There are two methods, first method you prepare plenty of different
    > width images, classifying them into 640, 800, 1024, 1280, 1600 and
    > whatever other sizes. Then you use javascript to detect screen width
    > and you're done. Easy but not exactly what I'm looking for.


    That one won't work reliably. screen width is irrelevant. Browser
    viewport might be of help though.

    > Second method: create a layer (for the background image) to go beneath
    > the existing content and resizing the image according to the screen
    > width.


    Thats trivial and doesn't need JS to do it.

    > bgimg = document.createElement("bgimg");
    > bgimg.src = "/images/bg.jpg";
    > st = {
    > position:"absolute",
    > zIndex:"-10",
    > width:screen.width,
    > top:"0",
    > left:"0"
    > }
    > for( s in st ){
    > img.style = st;
    > }
    > document.body.appendChild(bgimg);
    >


    That doesn't make it as tall as the viewport, or anything else for that
    matter. And again, screen.width is irrelevant. A 2048 pixel wide image
    wouldn't go real well in my 600 pixel wide browser window.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Jun 19, 2006
    #2
    1. Advertising

  3. Seige

    Seige Guest

    So Mr Grumpy-o-Randy, what do you propose?

    screen.clientWidth?screen.clientwidth:screen.width;

    height isn't particularly of my concern because width is more dependent
    in a design unless its a horizontal website.



    Randy Webb wrote:
    > Seige said the following on 6/19/2006 1:40 PM:
    > > Ever had headache when you can't resize the background width using CSS:

    >
    > Nope, can't say that I have.
    >
    > > body{
    > > background: url(/images/bg.jpg) ;
    > > background-width: 800px;
    > > }
    > >
    > > It won't work, would it? Of course not, it's not even defined in CSS.
    > > So, let's try to work it out using Javascript:
    > >
    > > There are two methods, first method you prepare plenty of different
    > > width images, classifying them into 640, 800, 1024, 1280, 1600 and
    > > whatever other sizes. Then you use javascript to detect screen width
    > > and you're done. Easy but not exactly what I'm looking for.

    >
    > That one won't work reliably. screen width is irrelevant. Browser
    > viewport might be of help though.
    >
    > > Second method: create a layer (for the background image) to go beneath
    > > the existing content and resizing the image according to the screen
    > > width.

    >
    > Thats trivial and doesn't need JS to do it.
    >
    > > bgimg = document.createElement("bgimg");
    > > bgimg.src = "/images/bg.jpg";
    > > st = {
    > > position:"absolute",
    > > zIndex:"-10",
    > > width:screen.width,
    > > top:"0",
    > > left:"0"
    > > }
    > > for( s in st ){
    > > img.style = st;
    > > }
    > > document.body.appendChild(bgimg);
    > >

    >
    > That doesn't make it as tall as the viewport, or anything else for that
    > matter. And again, screen.width is irrelevant. A 2048 pixel wide image
    > wouldn't go real well in my 600 pixel wide browser window.
    >
    > --
    > Randy
    > comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    > Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Seige, Jun 20, 2006
    #3
  4. Seige

    Seige Guest

    You're right. My appology for the mistake.



    Jim Carlock wrote:
    > "Seige" <> posted:
    > <snip>
    > bgimg = document.createElement("bgimg");
    > bgimg.src = "/images/bg.jpg";
    > st = {
    > position:"absolute",
    > zIndex:"-10",
    > width:screen.width,
    > top:"0",
    > left:"0"
    > }
    > for( s in st ){
    > img.style = st;
    > }
    > document.body.appendChild(bgimg);
    > </snip>
    >
    > Shouldn't that for statement read as...
    >
    > for (s in st) {
    > bgimg.style = st;
    > }
    >
    > ???
    >
    > --
    > Jim Carlock
    > Post replies to the group.
    Seige, Jun 21, 2006
    #4
  5. Randy Webb wrote:

    > [...]
    > Knowing the width of my browser window means something, knowing the
    > width of my desktop is useless in a browser.


    Objection, Your Honour !
    E.g. I remember a js wallpaper script that offers the appropriate
    wallpaper size according to the user's screen resolution.

    --
    Bart
    Bart Van der Donck, Jun 22, 2006
    #5
  6. Seige

    Seige Guest

    Bart Van der Donck wrote:
    > Randy Webb wrote:
    >
    > > [...]
    > > Knowing the width of my browser window means something, knowing the
    > > width of my desktop is useless in a browser.

    >
    > Objection, Your Honour !
    > E.g. I remember a js wallpaper script that offers the appropriate
    > wallpaper size according to the user's screen resolution.
    >
    > --
    > Bart


    You did? can you recall where is it? or at the very least what method
    did they use to resize the wallpaper dynamically?
    Seige, Jun 22, 2006
    #6
  7. Seige

    Dag Sunde Guest

    Seige wrote:
    > Bart Van der Donck wrote:
    >> Randy Webb wrote:
    >>
    >>> [...]
    >>> Knowing the width of my browser window means something, knowing the
    >>> width of my desktop is useless in a browser.

    >>
    >> Objection, Your Honour !
    >> E.g. I remember a js wallpaper script that offers the appropriate
    >> wallpaper size according to the user's screen resolution.
    >>
    >> --
    >> Bart

    >
    > You did? can you recall where is it? or at the very least what method
    > did they use to resize the wallpaper dynamically?


    With "wallpaper" here, I am fairly sure we're talking about the
    background-image of the body element, and *not* the OS wallpaper...

    You can find a lot about that if you do a search for "dynamic stylesheets"
    or "changing css Javascript"...

    --
    Dag.
    Dag Sunde, Jun 22, 2006
    #7
  8. Seige

    Matt Kruse Guest

    Dag Sunde wrote:
    > Seige wrote:
    >> Bart Van der Donck wrote:
    >>> Randy Webb wrote:
    >>>> Knowing the width of my browser window means something, knowing the
    >>>> width of my desktop is useless in a browser.
    >>> Objection, Your Honour !
    >>> E.g. I remember a js wallpaper script that offers the appropriate
    >>> wallpaper size according to the user's screen resolution.

    >> You did? can you recall where is it? or at the very least what method
    >> did they use to resize the wallpaper dynamically?

    > With "wallpaper" here, I am fairly sure we're talking about the
    > background-image of the body element, and *not* the OS wallpaper...


    On the contrary, I think Bart was referring to OS wallpaper. Otherwise,
    screen resolution (rather than browser canvas size) would be irrelevant.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
    Matt Kruse, Jun 22, 2006
    #8
  9. Matt Kruse wrote:

    > [...]
    > On the contrary, I think Bart was referring to OS wallpaper. Otherwise,
    > screen resolution (rather than browser canvas size) would be irrelevant.


    Yes, I meant downloadable wallpapers intended for desktop backgrounds.
    IIRC it went like this (quite simple):

    if (screen.width>600) theIMG = '1.jpg';
    if (screen.width>700) theIMG = '2.jpg';
    etc.

    --
    Bart
    Bart Van der Donck, Jun 22, 2006
    #9
  10. Seige

    Dag Sunde Guest

    Matt Kruse wrote:
    > Dag Sunde wrote:
    >> Seige wrote:
    >>> Bart Van der Donck wrote:
    >>>> Randy Webb wrote:
    >>>>> Knowing the width of my browser window means something, knowing
    >>>>> the width of my desktop is useless in a browser.
    >>>> Objection, Your Honour !
    >>>> E.g. I remember a js wallpaper script that offers the appropriate
    >>>> wallpaper size according to the user's screen resolution.
    >>> You did? can you recall where is it? or at the very least what
    >>> method did they use to resize the wallpaper dynamically?

    >> With "wallpaper" here, I am fairly sure we're talking about the
    >> background-image of the body element, and *not* the OS wallpaper...

    >
    > On the contrary, I think Bart was referring to OS wallpaper.
    > Otherwise, screen resolution (rather than browser canvas size) would
    > be irrelevant.


    Ouch... I didn't pay attention... I tought he said *change* wallpaper
    from Javascript... That's why I interpreted it like that...

    :-\

    --
    Dag.
    Dag Sunde, Jun 22, 2006
    #10
  11. Seige

    Randy Webb Guest

    Re: Resizing background using CSS and Javascript according to screenresolution

    Bart Van der Donck said the following on 6/22/2006 5:42 AM:
    > Randy Webb wrote:
    >
    >> [...]
    >> Knowing the width of my browser window means something, knowing the
    >> width of my desktop is useless in a browser.

    >
    > Objection, Your Honour !
    > E.g. I remember a js wallpaper script that offers the appropriate
    > wallpaper size according to the user's screen resolution.


    But that is still useless in the browser itself. And with regards to the
    question asked, it is still irrelevant. And JS wouldn't get my desktop
    wallpaper size right either.

    It would try to get me to download a 2048 wide wallpaper image when I
    use a 1024 image for the height.

    Makes my desktop size irrelevant again as I use dual monitors.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Jun 22, 2006
    #11
  12. Seige

    Seige Guest

    Good to know there's some discussion going on ...

    so ... are we getting anywhere yet?

    i'm still trying to think up a method to slide an IMG tag underneath
    the entire page (or BODY tag) so that I can resize it...


    Randy Webb wrote:
    > Bart Van der Donck said the following on 6/22/2006 5:42 AM:
    > > Randy Webb wrote:
    > >
    > >> [...]
    > >> Knowing the width of my browser window means something, knowing the
    > >> width of my desktop is useless in a browser.

    > >
    > > Objection, Your Honour !
    > > E.g. I remember a js wallpaper script that offers the appropriate
    > > wallpaper size according to the user's screen resolution.

    >
    > But that is still useless in the browser itself. And with regards to the
    > question asked, it is still irrelevant. And JS wouldn't get my desktop
    > wallpaper size right either.
    >
    > It would try to get me to download a 2048 wide wallpaper image when I
    > use a 1024 image for the height.
    >
    > Makes my desktop size irrelevant again as I use dual monitors.
    >
    > --
    > Randy
    > comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    > Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
    > Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Seige, Jun 23, 2006
    #12
  13. Seige

    Matt Kruse Guest

    Seige wrote:
    > i'm still trying to think up a method to slide an IMG tag underneath
    > the entire page (or BODY tag) so that I can resize it...


    Which piece are you missing? The code to retrieve the size of the document
    "canvas"?

    If so, take a look at my Screen.getDocumentWidth() and
    Screen.getDocumentHeight() functions in my "util" lib which is currently
    being tweaked and prepared for release:
    http://www.javascripttoolbox.com/lib/util/

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
    http://www.AjaxToolbox.com
    Matt Kruse, Jun 23, 2006
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mustufa Baig
    Replies:
    2
    Views:
    469
    bruce barker
    Nov 17, 2004
  2. Replies:
    5
    Views:
    8,252
    Andy Dingley
    May 7, 2005
  3. Pat
    Replies:
    5
    Views:
    523
  4. Markus Mohr
    Replies:
    2
    Views:
    197
    Markus Mohr
    Oct 29, 2003
  5. Maxi
    Replies:
    5
    Views:
    402
    Randy Webb
    Apr 7, 2006
Loading...

Share This Page