Masking large image into background

Discussion in 'HTML' started by alokw, Feb 26, 2007.

  1. alokw

    alokw Guest

    Hi everyone,

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

    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!
    -Alok
     
    alokw, Feb 26, 2007
    #1
    1. Advertising

  2. alokw

    dorayme Guest

    In article
    <>,
    "alokw" <> wrote:

    > 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.


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

    > 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.
    >


    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?

    > 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.


    --
    dorayme
     
    dorayme, Feb 26, 2007
    #2
    1. Advertising

  3. alokw wrote:
    > Hi everyone,
    >
    > Here's my problem. I'd like to revamp my web site, and I have this
    > idea.
    >
    > 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!
    > -Alok
    >


    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 <http://cad.chp.ca.gov/> 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
    <http://www.rossde.com/>

    Natural foods can be harmful: Look at all the
    people who die of natural causes.
     
    David E. Ross, Feb 26, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Hai Nguyen

    Masking a textbox as # box

    Hai Nguyen, Jan 11, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    548
    Dinesh Verma
    Jan 12, 2004
  2. academic
    Replies:
    0
    Views:
    314
    academic
    Feb 15, 2006
  3. jc
    Replies:
    3
    Views:
    1,755
  4. jc
    Replies:
    1
    Views:
    1,383
    Neredbojias
    Mar 19, 2008
  5. Dj Frenzy
    Replies:
    3
    Views:
    325
    Robert
    Feb 10, 2004
Loading...

Share This Page