Masking large image into background

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hi everyone,

Here's my problem. I'd like to revamp my web site, and I have this

I want to create essentially a border around the screen of about 100
pixels of just black.

Heres where it gets tricky: In the middle area which is not touched by
the border should be an image that I have created that is excessively
large, like 2000x1200 pixels or so. On a smaller screen, only some of
the 2000x1200 image should be shown - so the image should always be
sized at 100% - the black border is essentially a window into the
image. As the border (browser window) becomes bigger, more of the
image should become visible.

Right in the middle of everything should be a frame of some sort. It
can just be an iframe for all I care, but i want to place the main
content in this.

I'm currently using CSS to drive most of my site, so if it's possible,
I'd like to stick with CSS, but its not a big deal if I can only do
this with straight HTML or java or something.

Thanks for all of your help!

Re: Masking large image into background

In article

Quoted text here. Click to load it

You said it, excessively large. Everyone has to download a huge
file no matter what they can see of it. Bad idea.

Quoted text here. Click to load it

You know how to make a big black border on a box? You know how to
set a bg image? You know how to put a box within another box? You
know you can make boxes have backgrounds or just be transparent
so the parent bg shows through? You say you are "currently using
CSS to drive most of my site" so you must know these simple
things, so what is actually the problem? How to code for a frame?
How to stop the pic showing up in the frame? What?

Quoted text here. Click to load it


Re: Masking large image into background

alokw wrote:
Quoted text here. Click to load it

I have two design concerns about your plans, which you might resolve
without discarding your overall concept.

First of all, will there be any content superimposed over the background
image?  If so, have others look at the result to ensure that the image
does not interfere with reading the content.  I once saw a page where
the text used yellow print with a black background that was filled with
orange daisies.  It was impossible to read the text.  Yellow text over a
black background without the daisies would have been quite readable.

Second, be careful of your use of frames.  In general, use frames where
each component frame provides content, some of which needs to remain in
the browser window when content in the other frames changes.  Don't use
frames merely to show how clever you are.

A good example of the use of frames is at < with
Los Angeles selected as the area in the top frame.  If you select an
entry in the middle frame, you get details in the lower frame.  Note
that the frame borders can be dragged to resize the frames and that,
when the middle frame refreshes (about once per minute), neither of the
other two frames are disturbed.

A bad example of the use of frames is at the Medicare site.  Details
about an individual claim are in a frame so narrow vertically that the
entire information cannot be comprehended without constant vertical
scrolling.  When I need to see my own Medicare claims, I force the frame
into a window of its own.  The frames above and below the claim contain
little or no useful information.  Thus, frames are not really needed in
this case; worse, they negatively impact the use of the pages.

David E. Ross

Natural foods can be harmful:  Look at all the
people who die of natural causes.

Site Timeline