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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Div Background Image...Resize To Fit Browser Window...???

Status
Not open for further replies.
BiggyRat

BiggyRat

Technical User
Dec 17, 2006
56
US
hello again...

I would like to have a background image (.jpg) automatically resize to fit any browser's window...& I read somewhere on the web it should be accomplished by placing the image in a layer (as a background image); & then set the layer size to 100%.

can someone please tell me how the coding goes for this...?

[or...if that is in fact the correct approach? I don't care if it's html or css...I just want it to work. (&...I'm starting off w/ a larger image (so resolution doesn't get lost when going bigger)]

thanks very much,


BR


btw - I should add that it's the image's WIDTH I'm interested in resizing...while it's aspect ratio remains in tact.
 
Sort by date Sort by votes
Basically you can't. And even less as you describe because there's no direct way to have the iage stretch inside a div as its background.

The Problem with resizing images is it doesn't work very well, because the images become distorted and pixelated.

They loose whatever quality they have.

Normally what is done is to construct an image you can "tile" or repeat through the page. Usually its a small patterned image that covers the page.

The other option is to have an image of predetermined dimensions sit at the center of the page. The bigger the browser window the smaller the image will look but it will never be distorted.

The third option, and not one I personally would recommend, is to create several different background images of different dimensions and, using javascript or other client side code, get the dimensions of the browser window and serve up the correct image based on those dimensions.


For more info on background images:






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
that's no true, I don't believe...

...I've seen it, on the web.

like I said, I don't care if it's in a div or simply addressed as the background image in the body, or in any capacity, as long as it works.

& what I meant by 'width only' was...of course the entire image is rescaled in width & height, but the user can scroll down to see the entire image height. what is key is that...in the resizing...it's the image's 'width' that determines the scaling (to browser width), that's all. [& also, I've seen them whereby they collapse the height to match the browser height...not necessary for me, that's all.]

someone sent me this:


but I don't know which one to use (js or css)...& then how those codes get placed in the page. (I'm running IE7, myself, so it obviously has to work in that). I'll use either one, but do not know how to structure my code

but the examples there work, tho.

not real crazy about the text scrolling as opposed to the page, but that's something I can fix afterward.

I'm a neophyte at this...& someone has to tell me: place this snippet in the head, place this snippet in the body, replace the image in the example w/ yours, etc., etc.

thanks,


br
 
Upvote 0 Downvote
It is true, as you see in the examples of the link you provided, its very convoluted markup, with lots of bugs.
And as you can read in the second option, it doesn't even work in IE6 or IE7 correctly.

And all this doesn't remove the fact that the images will still be horribly pixelated at larger resolutions.

Perhaps creating a large image to start with that covers the regular resolutions may be a better approach.

Anyway, if you want to use the first option

Stick the CSS in between style tags <style></style> in the <header></header> of your document, and the divs and table in your <body></body>.

Fair warning: as you add more content, the absolute positioning is going to become a nightmare to manage.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Since this issue is entirely unrelated to Dreamweaver I would suggest you ask it in forum215.

I would suggest that you look carefully and critically at the example website ( before committing yourself to this kind of effect. Many people will find the visual effect to be a bit naff, if not actually nauseous when you resize your browser.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
UPDATE:

you blokes were absolutely correct...tried a bunch of different codes...(before I came back here)...found one & edited it 'till it worked...did all that...& the resized image looked bad, anyway

(even tho I started off w/ a larger image, so as to avoid loss of resolution when enlarging...as stated, browsers do a crappy job of rescaling; & the subject(s) in my image had a jagged outline when reducing.

so...someone had suggested a fixed sized, centered image...& that's what I did.

looks a lot cleaner; & got the job done.

go here:


& click on the links for 'Mission' & 'Contact Us' (in the left side vertical navigation bar)

[btw - wasn't trying to get attitudinal...was just in a rush]

thanks,


br
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

brk1221
  • Locked
  • Question
Preview in browser - no css
Replies
3
Views
117
spamjim
spamjim
RosieGp
  • Locked
  • Question
How to read string of 0s and 1s 1
Replies
3
Views
306
LyndonOHRC
LyndonOHRC
Mike Lewis
  • Locked
  • Question
Using Dreamweaver to maintain a site not created in Dreamweaver
Replies
2
Views
289
Mike Lewis
Mike Lewis
LyndonOHRC
  • Locked
  • Question
Need help using ImageCrop()
Replies
1
Views
91
LyndonOHRC
LyndonOHRC
lwfg
  • Locked
  • Question
getting form values from ColdFusion programn to asp.net program
Replies
2
Views
117
LyndonOHRC
LyndonOHRC

Part and Inventory Search

Sponsor

Back
Top