SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Full screen Background image (not flash)

    Hi Chaps, ive tried with pure css, however i get distortion of the image.

    I dont have a clue about javascript, however i saw i site that uses mootols.http://ringvemedia.com

    What im trying to achieve is a full screen background image that doesnt distort ratio on either resize or various screen dimensions.

    Could someone point me the right direction.

    Many thanks in advance

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It uses some horrible markup:

    HTML Code:
    <div id="bg">
      <div>
        <table cellpadding="0" cellspacing="0">
          <tr>
            <td>
             <img alt="" src="server//bg.jpg" />
            </td>
          </tr>
        </table>
      </div>
    </div>
    They use javascript to measure the width of the viewport and then size the image accordingly. The image is actually higher than the viewport, but overflow:hidden solves that issue.

    I would use html like this:
    HTML Code:
    <body>
      <div id="main">
      <!-- content here -->
      </div>
      <div id="bg">
        <img id="bgimg" src="bg.jpg">
      </div>
    </body>
    Code CSS:
    body, #bg {
      overflow:hidden;
      position:relative;
      margin:0;
      padding:0;
    }
    #bg, #main {
      position:absolute;
      top:0;
      left:0;
    }
    Code javascript:
    var img = document.getElementById('bgimg');
    img.onload = function() {
      var ratio = document.body.offsetWidth / img.width;
      if (ratio < 1) {
        img.height = img.height * ratio;
        img.width = img.width * ratio;
      }
    }
    Place the javascript just before the closing </body> tag, or wrap it in a function and use the "on document ready" or "onDOMready" that many javascript frameworks use (or use your own if you don't want to use a framework), then you can put it in the <head>.
    E.g.:
    Code javascript:
    var shrinkwrapbg = function() {
      if (arguments.callee.done) return;
      arguments.callee.done = true;
      var img = document.getElementById('bgimg');
      img.onload = function() {
        var ratio = document.body.offsetWidth / img.width;
        if (ratio < 1) {
          img.height = img.height * ratio;
          img.width = img.width * ratio;
        }
      }
    }
    // Mozilla, Opera
    if (document.addEventListener)
      document.addEventListener("DOMContentLoaded", shrinkwrapbg, false);
     
    // IE
    /*@cc_on @*/
      document.write('<script id="ie_onload" defer src="javascript:void(0);"></script>');
      document.getElementById('ie_onload').onreadystatechange = function() {
        if (this.readyState == 'complete') shrinkwrapbg();
      }
    /*@*/
     
    // Safari
    if (/KHTML|Webkit/i.test(navigator.userAgent)) {
      khtmltimer = window.setInterval(function() {
        if (/loaded|complete/.test(document.readyState)) {
          window.clearInterval(khtmltimer);
          shrinkwrapbg();
        }
      }, 10);
    }

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Raffles, sorry but im a bit dumb..

    i dont understand the '"on document ready" or "onDOMready"' section
    Could you expand a little

    many thanks

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Never mind that then, just stick it before the closing </body> tag:

    HTML Code:
          <!-- other HTML here -->
        <script src="bgimgresize.js" type="text/javascript"></script>
      </body>
    </html>
    And stick this in bgimgresize.js:
    Code javascript:
    var img = document.getElementById('bgimg');
    img.onload = function() {
      var ratio = document.body.offsetWidth / img.width;
      if (ratio < 1) {
        img.height = img.height * ratio;
        img.width = img.width * ratio;
      }
    }

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Raffles, however it doesnt seem to work.

    Ive made the bkg image the same size as the site initiallly mentioned. It shows the bk image, however it doesnt expand to fill the view port, or reduce upon browser resize.

    you can see the text page here

    Many thanks

    b

  6. #6
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Test</title>
    <style type="text/css">
    html, body, #bgimg {
    	width: 100&#37;;
    	height: 100%;
    }
    body, #bgimg {
    	padding: 0;
    	margin: 0;
    }
    #bgimg {
    	position: fixed;
    	top: 0;
    	left: 0;
    }
    </style>
    </head>
    <body>
    <img src="asdsd.jpg" id="bgimg" alt="bgimg" />
    </body>
    </html>
    You might want to give it a minus z-index so it goes behind everything else.

    IE6 Probably won't like it. However, for all I care, IE6 can go @#$%.

  7. #7
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers, however what im trying to achieve is full screen without distortion of its ratio. If i use img1 set 100&#37; (for w idth and height) i get a detrimental effect....

  8. #8
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by barney0o0 View Post
    cheers, however what im trying to achieve is full screen without distortion of its ratio. If i use img1 set 100&#37; (for w idth and height) i get a detrimental effect....
    How do you want it then?

  9. #9
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    like the link in the first post....

    The image is increased to fill the viewpoint, without distortion of its ratio. The site uses js to achieve this, however i dont have a clue how to write js...

  10. #10
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by barney0o0 View Post
    like the link in the first post....

    The image is increased to fill the viewpoint, without distortion of its ratio. The site uses js to achieve this, however i dont have a clue how to write js...
    No, I don't think they are using js.

    I think I now how they are doing it but I got to go, will be back in a little.

  11. #11
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hum....ive been trying to sort this out for a couple of weeks.....the only option that ive seen is using mootools...i hope you are able to help..later

  12. #12
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well this is what you need, unfortunately I don't have the time to find out how to reduce the markup.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Test</title>
    <style type="text/css">
    html,body,#bg,#bg table,#bg td{width:100&#37;;height:100%;overflow:hidden}
    img{display:block}
    
    #bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
    #bg td{vertical-align:middle;text-align:center}
    #bg img{min-height:50%;min-width:50%;margin:0 auto}
    </style>
    </head>
    <body>
    <div id="bg"><div>
    <table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="asdsd.jpg" /></td></tr></table>
    </div></div>
    </body>
    </html>
    Edit: This will work on Fx, however you need the js for it to work on IE.

  13. #13
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hence the reason why im asking for help with js!
    (note:it doesnt work in safari either without the mootools js)

  14. #14
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by barney0o0 View Post
    hence the reason why im asking for help with js!
    (note:it doesnt work in safari either without the mootools js)
    Are you sure? It should:
    Code:
    timer:(Browser.Engine.gecko||Browser.Engine.webkit)?null:setInterval(kina.fix,200)

  15. #15
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, just a little revisit...thanks both your help with this however i still dont get the results that i would like, and that comes down to the js implimentation (which i dont have a clue about!)

    So i would like to have a div that expands full viewpoint, without distortion and that is compatable with ie and opera (sorry MM, i meant this rather than safari). One thing that i dislike (in the original site) is the use of tables and td's.

    Ive been trying to achieve this for while, and i have some websites that i would like to do in the future, therefore i would love to have closure not only so that i can get some work done, but also that i dont take over the js forum with the amount of posts!

    If someone could post me the complete solution i would would be more than happy to throw you a few quid.

    cheers
    b

  16. #16
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't ever used anything like this before but don't you need to re-initiate that script (the one that raffles wrote) whenever the browser is resized?

    ATM it just runs onload... correct?

    Maybe something like this: (just an adjustment of Raffles' script)

    Code JavaScript:
    var img = document.getElementById('bgimg');
    img.onload = resize;
    window.onresize = resize;
    function resize() {
       var ratio = document.body.offsetWidth / img.width;
       img.height = img.height * ratio;
       img.width = img.width * ratio; 
    }
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  17. #17
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers jimmyp

    Ive used your version of the js, and the image does change depending on the view point, however there is slight distortion on full screen (ive got a benq wide screen) and also if i resize the browser the image reduces leaving whitespace...in opera it just fails example here

    If i use mmj's example (without any js), it functions perfectly (in moz and ie7), but in opera its centralises with white space at top and bottom)

    example here

    i hope that gives some idea of the reason why i losing the will to live.....

  18. #18
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Barney --

    Funny that I have stumbled across your post. I am actually in the exact same battle as you! I know how frustrated you are.. as I have been scouring all over the internet for help with this. I've posted in several forums and not gotten very far. This is actually what I've found and it produces similar effects as the ringvemedia.com example. Check this out.. you might find it useful. This guy also provides the correct javascript that is needed for this to work in most browsers.. I have not tried it yet as I've just been trying to get it to work. Also, in the js code, there is a part that you are going to need to change. Here..

    search-this.com / 2008 / 06 / 17 / nicely-fitting-background-images

    (sorry, I couldn't post a link.. it told me I don't have enough posts under my belt. that's pretty retarded. All you have to do is just take out the spaces I put in between the / to disguise the link. )

    Code:
     bgimg.onload = resizeBg;
      bgimg.src = 'images/YOURBIGPICTUREHERE.jpg';
      if (window.addEventListener) window.addEventListener('resize', resizeBg, false);
    Those lines of code are specifically on lines 8,9, and 10. You want to edit line 9. Check it out. Hope this helps you and gives you a little bit of help.

  19. #19
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's some links to some of the forums that I have posted on the same topic. Check out my responses as well, maybe they can help you too.

    webdevforums.com / showthread.php?threadid=26223

    daniweb.com / forums / post631331.html#post631331

    Please don't forget that because I don't post enough at sitepoint, I can't publish links. Please take out the spaces that I have placed next to all of the /'s in order to disguise the link. Sorry again

  20. #20
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice catch
    mmj

  21. #21
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...

    You might want to give it a minus z-index so it goes behind everything else.

    IE6 Probably won't like it. However, for all I care, IE6 can go @#$%.[/QUOTE]


    What do u mean by that?

  22. #22
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow this is an old topic.

    What do you mean by what do I mean?
    mmj

  23. #23
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by M-M-J View Post
    Wow this is an old topic.

    What do you mean by what do I mean?
    I was talking about the minus z-index

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    To revisit this topic anyhow, to get a full-screen background image that doesn't distort, one of the best solutions is via css.
    http://css-tricks.com/how-to-resizea...kground-image/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    To revisit this topic anyhow, to get a full-screen background image that doesn't distort, one of the best solutions is via css.
    http://css-tricks.com/how-to-resizea...kground-image/
    Not bad but minimize the window horizontally and it won't work too good.

    @tiago:

    I am loathe to quote W3schools but:

    The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

    Note: Elements can have negative stack orders.
    mmj


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
  •