/    Sign up×
Community /Pin to ProfileBookmark

BG Effects; Full Size Image

Copy linkTweet thisAlerts:
Feb 27.2003

I’m fairly new to java, it’s been a good year or two since I’ve made any websites, and my friend and I are working on one.

Our problem is that our background image is perfect for users with 1024×768 res. (have the bg set on fixed so it doesn’t scroll) on their computers, but people with higher or lower rez, it looks REALLY bad ?

So I started to look for a script that could auto-resize the image, and came across [URL=http://javascript.internet.com/bgeffects/full-size-image.html]this one[/URL]. All fine and dandy, but the thing is, the image appears/stretches OVER everything else (is appearing infront of the text and whatnot), when it’s supposed to be the background image.

I hit a brain fart and am not sure how to set it so with this script, it’s my background image that auto-resizes to whatever res/size the browser is at. Any help would be greatly appreciated!

Thanks ahead of time! ?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@boojumFeb 27.2003 — does the script ever set the z-index to a negative number? the <div id="backgroundLayer"> starts out as z-index:1 in the html
Copy linkTweet thisAlerts:
@iwanboauthorFeb 27.2003 — ahh, okay, got it behind everything! Thanks a ton!

One last question now :p

Any possible way to make it fixed so it doesn't scroll?
Copy linkTweet thisAlerts:
@boojumFeb 27.2003 — position: fixed

by the way, netscape doesnt do negative z-index as far as i know, so you might want to have your background default z-index instead and make everything else some positve z-index, like ten or something (so you can sandwich in more stuff later if you want)

[edit: you talking about overflow i think, overflow:hidden will cut off what ever doesnt fit in the box, but i have an old note to myself here saying "mozilla doesnt like overflow:scroll" so i would test it first]
Copy linkTweet thisAlerts:
@boojumFeb 27.2003 — position: fixed

by the way, netscape doesnt do negative z-index as far as i know, so you might want to have your background default z-index instead and make everything else some positve z-index, like ten or something (so you can sandwich in more stuff later if you want)
Copy linkTweet thisAlerts:
@iwanboauthorFeb 27.2003 — After I change Postion from absolute, to fixed, it appears at the top of the site ?

I uploaded the htm file I was trying it on.

http://iwanbo.netfirms.com/autosizenotworking.htm

that's the address if you want to look at the source and check if I'm doing anything wrong.

really appreciate the help boojum ?
Copy linkTweet thisAlerts:
@boojumFeb 27.2003 — if(is.ie4 || is.ie5 || is.ns6 || is.ns4) {

image1_width = (available_width * 1.00);

image1_height = (available_height * 1.00);

var image1 = '<img src="http://mywebpage.netscape.com/Iwanbo/bgmid.jpg" width="' + image1_width + '" height="' + image1_height + '">';



/* i think this is just pasting it on after the first background, rather than changing the original or what ever its supposed to do. change the actual attributes of the node itself instead. */

document.write(image1);

}

i think what you wanted was overflow:hidden. at any rate, take what i wrote in the comments with a grain of salt, i'm new to javascript + DOM
×

Success!

Help @iwanbo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...