http://vanguardseven.free2host.net/ is where the site demo is and I'm having a winger of a time. I need to have the upper BG image of New York to stretch, not repeat, all the way across like it is here http://vanguardseven.free2host.net/top3.htm

Problem is, if you look closely, the top3.htm has the text in it's own little image. I need the text as seen in the demo web site, at the top of the top frame BG. But I also need that BG image to stretch across the screen reguardless if someone's resolution is 800X600 or 1024x768. This is a winger...can anyone help?

width=100%

put that in the image tag

Jaymc.co.nr

put content in the upper layer

here:
http://azza.al-azhar.web.id/index2.htm
http://azza.al-azhar.web.id/indextest.php

it's a bit uncommon but layering and image size in % is html 4.0 compliant

^o^
are you in Asia? do you watch Animax Asia? Please Vote

The width=100% only applys to something in the tag, not a background correct? I put the width=100%
there and no results. I don't want the image to repeat, just to stretch. The tag is there but I need to stretch across, not repeat

you're right, can't put sizes on background image or css, that's why I said above you need to put the content in the upper layer... the image is in the bottom layer (not background)...

see the sample pages and get the css file...

or here's the basic:

[body with 0 margin & 0 padding]
[image stretched]
[upper layer, absolute position top-left, width-height 100%]

[!-- content here --]

[/upper layer]
[/body]

:)

^o^
are you in Asia? do you watch Animax Asia? Please Vote

imo, stretching the image, although it's w3c compliant is not really good... no matter how, it'll be crippled... that's why at the sample I only put those blurred image, so if it is crippled then it wont be a big problem anyway :D

here's another trick:

create the image for a wide resolution, but make it still nice at the first 728 pixel if it is viewed with 800x600 resolution...

then put the image as a bgimage in a table, and align it to left...

that way, 800x600 user will only see what they can see, but no horizontal scrollbar will show...

and wider monitor users will still see nice-uncrippled image...

here's a sample:

http://azza.al-azhar.web.id/sulteng/

look at the top image, and try to resize your browser :)

in that site, there's a script to detect if you're accessing it by using resolution wider than 1024 then the main table'll be fixed at 1024 and centered...

but if you access it by using 1024 or lower, it'll be stretched...

so if you want to test it out, you must use 1024x768 resolution... and slowly resizing your browser...

I hope Im not creating more confusion here :o

^o^
are you in Asia? do you watch Animax Asia? Please Vote

But I need the text to be in it too. The text is seperate from the image.

yes that can apply in both method :)

1st method:

use stretched image in the bottom layer

- because we can't put image sizes on css/background

- image will be crippled

- sample here <-- view the source and get the css file (look at "link href")

2nd method

use wide image as a table background, but make the first 800 pixels still meaningful when the site is viewed by 800x600 users...

- image quality won't change

- we can put javascript & php to load only the necessary images (eg: don't load the rest of the image when only the first 800 pixel will be visible)

- another sample here <-- same as my above post, you can only test it out if you use exactly 1024x768 resolution before your browser session is recorded by the server (before opening the site)

^o^
are you in Asia? do you watch Animax Asia? Please Vote