Full screen Background image (not flash)


#1

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

It uses some horrible markup:

<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:

<body>
  <div id="main">
  <!-- content here -->
  </div>
  <div id="bg">
    <img id="bgimg" src="bg.jpg">
  </div>
</body>

body, #bg {
  overflow:hidden;
  position:relative;
  margin:0;
  padding:0;
}
#bg, #main {
  position:absolute;
  top:0;
  left:0;
}

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.:

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

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

Never mind that then, just stick it before the closing </body> tag:

      <!-- other HTML here -->
    <script src="bgimgresize.js" type="text/javascript"></script>
  </body>
</html>

And stick this in bgimgresize.js:

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

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

<!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

cheers, however what im trying to achieve is full screen without distortion of its ratio. If i use img1 set 100% (for w idth and height) i get a detrimental effect....


#8

How do you want it then?


#9

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

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

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

Well this is what you need, unfortunately I don't have the time to find out how to reduce the markup. frowning

<!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

hence the reason why im asking for help with js!
(note:it doesnt work in safari either without the mootools js)


#14

Are you sure? It should:

timer:(Browser.Engine.gecko||Browser.Engine.webkit)?null:setInterval(kina.fix,200)

#15

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

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)

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; 
}


#17

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

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. (: )

 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

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

Nice catch smile