Full screen Background image (not flash)

**barney0o0** · Jun 7, 2008 02:40

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

**Raffles** · Jun 7, 2008 05:19

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

**barney0o0** · Jun 7, 2008 07:20

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

**Raffles** · Jun 7, 2008 16:06

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

**barney0o0** · Jun 8, 2008 23:57

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

**M-M-J** · Jun 9, 2008 05:34

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 @#$%.

**tiaggo** · Oct 28, 2008 15:28

...

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?

**barney0o0** · Jun 9, 2008 05:40

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

**M-M-J** · Jun 9, 2008 05:47

Originally Posted by barney0o0

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

How do you want it then?

**barney0o0** · Jun 9, 2008 05:53

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

**M-M-J** · Jun 9, 2008 06:02

Originally Posted by barney0o0

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.

**M-M-J** · Jun 9, 2008 06:42

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.

**barney0o0** · Jun 9, 2008 06:54

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

**M-M-J** · Jun 9, 2008 07:31

Originally Posted by barney0o0

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)

**barney0o0** · Jun 11, 2008 00:34

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

**barney0o0** · Jun 9, 2008 06:08

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

**JimmyP** · Jun 11, 2008 00:59

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

**barney0o0** · Jun 11, 2008 01:43

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

**frappucinolatchi** · Jun 20, 2008 10:31

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.

**frappucinolatchi** · Jun 20, 2008 10:44

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

**M-M-J** · Jun 21, 2008 06:40

Nice catch

**M-M-J** · Oct 28, 2008 16:07

Wow this is an old topic.

What do you mean by what do I mean?

**tiaggo** · Oct 29, 2008 14:21

Originally Posted by M-M-J

Wow this is an old topic.

What do you mean by what do I mean?

I was talking about the minus z-index

**paul_wilkins** · Oct 29, 2008 16:08

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/

**M-M-J** · Oct 30, 2008 11:47

Originally Posted by pmw57

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.

User Tag List

Thread: Full screen Background image (not flash)

Thread Tools

Display

Hybrid View

Full screen Background image (not flash)

Bookmarks

Bookmarks

Posting Permissions