I've got an image background which content I want to be always visible, no matter what is the user's resolution. Therefore, I want to be able to determine what is the resolution and set appropriate background image file before page loads, on the very beginning. Is it possible somehow?
views:
57answers:
4
A:
Using a JavaScript framework like MooTools you can utilize the DomReady event instead of onLoad (which waits for all image elements to load) you can fire an event when the page has loaded.
Alternatively with CSS you can position absolute top left and width:100% to win the day. :O
M2tM
2010-10-22 20:23:47
I prefer not to use external code if I can do it easily without it :). As for the second part of your answer - I don't want it to resize with the window, but to adjust to screen's width. But thanks anyway :).
kremuwa
2010-10-22 21:30:00
A:
I realize you're specifically asking about JavaScript, but there's a pretty decent technique for doing this with CSS (and optionally a little JavaScript) described at the CSS Tricks site.
stevelove
2010-10-22 20:24:04
I don't want it to resize with the window, but to adjust to screen's width. Thanks anyway :)
kremuwa
2010-10-22 21:29:14
The technique I linked to uses CSS to scale the image so that it fits the browser viewport. It does not resize the window.
stevelove
2010-10-22 21:54:30
I know - "I don't want it to resize with the window" - it means: "I don't want to scale the background when the window (and the browser's viewport) changes its size". I want to adjust it only to screen's width.
kremuwa
2010-10-22 22:41:10
@some: Good question. It runs BEFORE the `<body>` tag, but there is no access to the elements on the page. I should clarify that.
Marko
2010-10-22 21:04:11
@Marko: You only have access to the elements that has been declared before the script-tag because the rest of the page hasn't been parsed yet. That's the reason why people waits for the DOM to be loaded before they start to touch it. A decent framework makes it very easy to attach a function to the DOM-loaded event in a cross browser way.
some
2010-10-22 22:25:04
Yes @some, but placing something right after the `<body>` will mean you have access to **JUST** the `<body>` which is what the OP wants. Given a large page, there will be a significant delay before the new background image is shown.
Marko
2010-10-22 22:28:57
@Marko: You also have access to `<html>` and `<head>` if they are specified... Sorry :) OP could put in a style sheet in the header, with javascript: `<script type="text/javascript">document.write("<style type='text/css'>body{background:#f00;}<\/style>");</script>` (could calculate width and height and put `url(image" +dim ")` with the color.)
some
2010-10-23 02:19:34
+1
A:
Check this article on getting screen resolution in Javascript: http://andylangton.co.uk/articles/javascript/browser-screen-resolution/
Script tags execute inline if you don't do anything special to defer them (and deferring script execution is not supported on all browsers). This means a script tag nested just inside the body tag will be executed before the rest of the body loads. You could have your script detect the screen resolution and set the background image for the body right there.
Gopherkhan
2010-10-22 20:31:07
I know how to get screen's resolution, thanks :). I would love to accept both of your answers but since it's not possible and @Marko's answer is more complex I have to take a decision. But thanks again and have a point for useful answer.
kremuwa
2010-10-22 21:34:56