resizing a background image

skills · Jul 29, 2003

Is there html code to automatically resize a background image from say 600x800 to another size. I have an image that looks great on a 600x800 resolution, but when viewed at a higher resolution, the image is displayed multiple times to fill the screen.

Thanks,

Skills

WizyWyg · Jul 29, 2003

No; the only thing you can do is control position and scrollng through CSS. Can't resize it.

IF your background is 600x800 you are going to drive people away from your site cause that'llt take a hella long time to load.

dwarfthrower · Jul 29, 2003

But you can resize it using JavaScript & CSS.
Set up two divs in the <body> section of your document, one for the body and one for the background like so:

Code:

<div id=&quot;content&quot; style=&quot;position:absolute;z-index:10;&quot;>Boo! This is my content.</div>
<div id=&quot;background&quot; style=&quot;position:absolute;z-index:1;height:100%;width:100%;&quot;></div>

Set up a script in the <head> section of your document to insert the background, resized into the 'background' div:

Code:

<script type=&quot;text/javascript&quot;>
   function setBGImage() {
    target = document.getElementById('background');
	target.innerHTML = '<img src=&quot;yourbackground.jpg&quot; width=&quot;' + target.style.width + '&quot; height=&quot;' + target.style.height + '&quot;>'
}
</script>

And call this function in the body's onload event:

Code:

<body onload=&quot;setBGImage();&quot;>

WizyWyg · Jul 29, 2003

And what happens when someone comes by with a java disabled browser?

dwarfthrower · Jul 29, 2003

Disabling Java doesn't usually have any effect on the operation of JavaScript.

The code I have provided is compliant with current standards. If people are too lazy / stubborn to download a recent release of a standards compliant browser (they are free after all) or knowingly switch off a feature of their browser which otherwise enables them to view the full range of standard technologies, then they don't get to see the effects.

I would have thought that to be painfully obvious.

phototaker · Jul 30, 2003

dwarfthrower:
I have a question about this in your post -
"And call this function in the body's onload event:
<body onload="setBGImage();">"

Where does this go exactly? Thanks for any info. Richard
[hammer]

dwarfthrower · Jul 30, 2003

Ok:

Code:

<body onload=&quot;setBGImage();&quot;>

Is an example of how your would call the [tt]setBGImage()[/tt] function as a consequence of the document's [tt]onload[/tt] event.

So you wouldn't need to put the entire code into your source, just insert the text [tt]onload="setBGImage();"[/tt] into the <body> tag of your HTML document.

This tells the document to run the function when the page has loaded - you need to run the function after the page loads, otherwise the background div tag may not yet exist in the page when the script tries to run.

WizyWyg · Jul 31, 2003

dwarf,

yes it does, when you disable java entirely, nothing java releated (scipt or not) will work

People should start leaning away from the use of Java entirely because of so many security issues.

And dont assume that the "visitors' are responsible for not having " the latest " download. Many places; ie work, libraries, schools, do not allow their browsers to be "modified" by the people who use it because they could be abused or open it up to some "legal" problems. So they disable user settings and/or the use of java in their browsers.

I for one, never surf with Java turned on because of all the crap that goes on the web with "goodies" that absolutely do nothing but hinder a persons enjoyment of visiting a website.

If a site has to resort to fancy tricks that are only eye candy but serve no real purpose, i can probably find a site with the same information, without it.

What I've seen by Java can be easily done safely with CSS or server side language like PHP, CFM or ASP; bar it from pop up windows, which are a nuisance to begin with.

I hope java goes the way of the do-do.

EdwardMartinIII · Jul 31, 2003

Okay. Java is not JavaScript. They are no more related than "George W. Bush" and "Lo a Burning Bush", to wit: 4 otherwise unrelated letters.

I can kill Java and let JavaScript run anything. I can kill JavaScript and let all Java run. They are not related. They are not even friendly. Internet Explorer, in fact, automatically has Java disabled, but JavaScript enabled which is ironic given that most of the malicious website code out there depends on JavaScript being as indiscriminate as a newbie rock star and there's really not much at all dangerous with Java applets (for the most part).

That said...

Skills, such a big background image is almost certainly going to be a bandwidth hog. Admittedly, there are instances where people really want to se a big image of, say, last night's cool traffic fatality, but if there's anything you can do to reduce the need for a single image, may I please encourage you to do so.

Also, may I encourage you to come up with a method whereby your website looks good regardless of the resolution viewed? Not all clients run their browsers at max size anyway (quick, right now, are you?), so trying to target a specific screen setting is just dumb, especially when I am 99% sure that whatever you're trying to do such that you need such a specified space can be done with means other than those you suggest.

dwarfthrower, as I understand it, if the client is not allowing JavaScript to run, then your code does nothing -- it just defaults to the CSS calls about background image?

Also, there are a lot of browsers that don't run JavaScript for perfectly legitimate reasons. Lynx wouldn't know JavaScript from the "script" for Jurassic Park 3. But there are really, really good reasons why it's important for your site to be somewhat readable using Lynx (and other textual browsers). I personally have disabled JavaScript when I run IE from home. Actually, I told IE to query me on each piece of JavaScript. I do this because 95% of the time, JavaScript is used for stupid crap.

I, however, love using it for interesting things, such as for my calculator or for certain web-based client tools.

So I contain contradictions. [smile]

Here's a sorta' cheater method of always centering a background image, by the way:

Code:

<style type=&quot;text/css&quot;>
<!--
BODY { background: #ffffff url(filename.gif) no-repeat center }
-->
</style>

It's not resizing it, but if the image is something like a watermark, then it'll still look good if designed properly.

Cheers,

[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

dwarfthrower · Jul 31, 2003

Mate... calm down. You seem to be confused between Java and JavaScript. They are separate, non-related languages - one doesn't require the other in any way. The only things similar about them are the names and some of the syntax. Javascript was originally "ECMAScript" (still is really) until Netscape re-named it to try and get a free ride on the then soaring Java bandwagon.

The code I posted above is Javascript... what's more, it's code for displaying a background image... If the user switches off JavaScript, they wont see the background image. Big Deal. What sort of site has information encoded in their background image? Turn Java off and it wont have any effect on the operation of JavaScript unless you also disable JavaScript... That's why they are two separate options.

What you choose to browse and, how you choose to browse it is of absolutely no interest to me. This is a technical forum, for the discussion of what is and is not possible not what is or is not annoying for a few people who seem to have a problem with using standard web technology. The last time I checked, the W3C had no problem with JavaScript, so you - your own personal browsing preferences aside - are probably not in any position to tell me otherwise.

dwarfthrower · Jul 31, 2003

Sorry Ed, My tirade got misplaced under your enlightened response. Please don't think it was directed at you.

EdwardMartinIII · Jul 31, 2003

No worries!

Cheers,

[monkey]

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

resizing a background image

skills

Programmer

WizyWyg

Technical User

dwarfthrower

Programmer

WizyWyg

Technical User

dwarfthrower

Programmer

phototaker

Technical User

dwarfthrower

Programmer

WizyWyg

Technical User

EdwardMartinIII

Technical User

dwarfthrower

Programmer

dwarfthrower

Programmer

EdwardMartinIII

Technical User

Similar threads

Part and Inventory Search

Sponsor