www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 29

Thread: onload -- CSS image styling in javascript

  1. #1
    Join Date
    Oct 2008
    Posts
    17

    onload -- CSS image styling in javascript

    I've got a background image that is kind of bandwidth heavy so I'm using body onload to load it last. What I haven't figured out is how to make the image stretch and shrink to match the screen size with javascript. I can do it with CSS, but I don't know how to apply the css styling in javascript format.
    Any help would be appreciated : )

    CSS code:
    html, body{ width:100%; height:100%; overflow:hidden;}
    #backgroundFill{position:absolute; z-index:1; width:100%; height:100%;}

    html WITHOUT javascript:
    <body><img src="wall.jpg" id="backgroundFill" />

    html WITH javascript;
    <body onload="setBackground()">

    javascript:
    function setBackground(){
    document.body.style.backgroundImage='url(wall.jpg)';
    }

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    You can't resize a background image, use the positioned html img.

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by bnther View Post
    I've got a background image that is kind of bandwidth heavy so I'm using body onload to load it last. What I haven't figured out is how to make the image stretch and shrink to match the screen size with javascript. I can do it with CSS....
    I'm interested to know how you did it in CSS?

  4. #4
    Join Date
    Oct 2008
    Posts
    17
    Let me clarify what I mean by resize.
    With CSS, you can make an image stretch or contract according to browser size so that it's always 100% covered. An example of that would be here: http://gtwebconcepts.com/GTNew/ If you'll notice, the background texture is a single image that will stretch to cover all of the screen no matter how far you extend it (or at least as far as my duals will reach) and contract in the same fashion. The CSS code for it is shown above. What I'm looking to do is to use that same CSS styling in a body onload.

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by bnther View Post
    An example of that would be here: http://gtwebconcepts.com/GTNew/ If you'll notice, the background texture is a single image that will stretch to cover all of the screen no matter how far you extend it
    Interesting enough, in your example above that body's background image, even it is CSS set, I]does not exist[/I] , so there is nothing to see in order to follow your thoughts.

    But - do you mean the repeat CSS property?:
    http://www.w3schools.com/css/pr_background-repeat.asp

  6. #6
    Join Date
    Oct 2008
    Posts
    17
    Quote Originally Posted by Kor View Post
    Interesting enough, in your example above that body's background image, even it is CSS set, I]does not exist[/I] , so there is nothing to see in order to follow your thoughts.
    ???

    I'm not sure what you mean be does not exist. Does it not show up in your browser? I checked it this morning in Safari, Mozilla an IE and it displayed and stretched as designed. Is your background blank? Not quite sure what's going on there.

    At any rate here's the source code.

    HTML
    <body><img src="images/backgroundImage.jpg" id="backgroundFill" />

    CSS
    html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
    #backgroundFill{position:absolute; z-index:1; width:100%; height:100%;}

    What I need to know is how to call the #backgroundFill class ID from a javascript function.

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by bnther View Post
    I'm not sure what you mean be does not exist.
    The site:
    http://gtwebconcepts.com/GTNew/
    has in CSS this line:
    Code:
    body {
    background-image: url(images/backgroundClip.jpg);
    }
    Well, that image backgroundClip.jpg does not exist. What is so difficult to understand? Try to see it at:
    http://gtwebconcepts.com/GTNew/image...groundClip.jpg

  8. #8
    Join Date
    Oct 2008
    Posts
    17
    Quote Originally Posted by Kor View Post
    The site:
    http://gtwebconcepts.com/GTNew/
    has in CSS this line:
    Code:
    body {
    background-image: url(images/backgroundClip.jpg);
    }
    Well, that image backgroundClip.jpg does not exist. What is so difficult to understand? Try to see it at:
    http://gtwebconcepts.com/GTNew/image...groundClip.jpg

    backgroundClip does not exist.
    That was something that was put in during the original design -- discarded but not removed. Sorry for the confusion.
    backgroundImage is what I'm using and you'll see it in the HTML Code. If you're using the newest version of Firefox, you can view source and see the image as a link.

    HTML
    <body><img src="images/backgroundImage.jpg" id="backgroundFill" />

    CSS
    html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
    #backgroundFill{position:absolute; z-index:1; width:100%; height:100%;}

    Again, what I'm after is how to call the #backgroundFill class ID from a javascript function.

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    document.getElementById('backgroundFill')

  10. #10
    Join Date
    Oct 2008
    Posts
    17
    Fang,

    Thanks for the reply.

    I did try that originally. I even tried it by calling it with the #backgroundFill. Still no go. I loads the image after the page is loaded, which is half of what I wanted it, but it tiles it.

    I put the example online for people to look at. Don't judge too hard, it's not finished
    http://gtworkspace.com/jQuery/

    Is it possible to put CSS styling in Javascript? Maybe even put Javascript in the CSS page and call it? I dunno, I'm new to this and I'm reaching for straws here.

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    As previously mentioned, you can not stretch a background image, only tile it.
    This would work:
    Code:
    <body>
    <img style="position:absolute" alt="wall" src="wall.jpg" width="100&#37;">
    	<div id="global">

  12. #12
    Join Date
    Oct 2008
    Posts
    17
    Quote Originally Posted by Fang View Post
    As previously mentioned, you can not stretch a background image, only tile it.
    Uhmmm...yes you can.

    Here is the image before CSS is applied to it: backgroundImage

    Here you can see how CSS has manipulated that image: backgroundImage

  13. #13
    Join Date
    Jan 2009
    Posts
    3,346
    Quote Originally Posted by bnther View Post
    Uhmmm...yes you can.

    Here is the image before CSS is applied to it: backgroundImage

    Here you can see how CSS has manipulated that image: backgroundImage
    Your code is not streching a background image. It is stretching an img element.

  14. #14
    Join Date
    Oct 2008
    Posts
    17
    Quote Originally Posted by criterion9 View Post
    Your code is not streching a background image. It is stretching an img element.
    OK

    Could you explain please

  15. #15
    Join Date
    Jan 2009
    Posts
    3,346
    You have an <img> element your css is altering. Not a "background-image". It is not possible to scale a "background-image" using CSS, you can only repeat vertically, horizontally, or both.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles