Image overlay (sent through google, as Outlook Express isnt posting my messages)

Discussion in 'HTML' started by Lee Harris web, Jan 27, 2004.

  1. I have the following code which places a background image which doesnt
    tile very well in a logo banner "frame" at the top of a page, such
    that it always fills the window, whatever resolution is used

    <DIV id=logo><IMG style="WIDTH: 100%; HEIGHT: 150px"
    alt="Bombers Links Tours 2003"
    src="images/2004banner.jpg"></DIV>

    here is my CSS
    #logo {
    color: #000;
    background-color: #b0ceb4;
    border-bottom: 1px solid #000;
    }


    what I would like to do is have the img in the #logo css but still at
    the 100% style and then be able to put a transparent bg gif in the
    actual div on the webpage so it overlays on top of the background, but
    that image would not be rescaled (but the bg underneath would)


    so, something like this ( I know this isnt the right syntax - that is
    what I am asking - is this possible, and what is the correct syntax to
    achieve it?)

    <DIV id=logo><IMG src="images/somethingelse.GIF"></DIV>

    here is my CSS
    #logo {
    color: #000;
    background-color: #b0ceb4;
    border-bottom: 1px solid #000;
    background-image:url (style="WIDTH: 100%; HEIGHT: 150px" alt="x"
    src="images/2004banner.jpg")
    }

    thanks in advance
    LeeH
     
    Lee Harris web, Jan 27, 2004
    #1
    1. Advertising

  2. "Lee Harris web" <> skrev i melding
    news:...
    > I have the following code which places a background image which doesnt
    > tile very well in a logo banner "frame" at the top of a page, such
    > that it always fills the window, whatever resolution is used
    >
    > <DIV id=logo><IMG style="WIDTH: 100%; HEIGHT: 150px"
    > alt="Bombers Links Tours 2003"
    > src="images/2004banner.jpg"></DIV>
    >
    > here is my CSS
    > #logo {
    > color: #000;
    > background-color: #b0ceb4;
    > border-bottom: 1px solid #000;
    > }
    >
    >
    > what I would like to do is have the img in the #logo css but still at
    > the 100% style and then be able to put a transparent bg gif in the
    > actual div on the webpage so it overlays on top of the background, but
    > that image would not be rescaled (but the bg underneath would)
    >
    >
    > so, something like this ( I know this isnt the right syntax - that is
    > what I am asking - is this possible, and what is the correct syntax to
    > achieve it?)
    >
    > <DIV id=logo><IMG src="images/somethingelse.GIF"></DIV>
    >
    > here is my CSS
    > #logo {
    > color: #000;
    > background-color: #b0ceb4;
    > border-bottom: 1px solid #000;
    > background-image:url (style="WIDTH: 100%; HEIGHT: 150px" alt="x"
    > src="images/2004banner.jpg")
    > }


    In that case, the correct syntax would be:

    CSS:
    #logo { color: black; background-color: #b0ceb4; border-bottom: 1px solid
    black;
    background-image: url(images/2004banner.jpg); background-repeat:
    no-repeat;
    background-position: top left;
    }

    HTML:
    <div id="logo"><img src="images/somethingelse.gif"></div>

    The <div> will NOT resize the background image, you'll have to do that in
    your graphics program - which doesn't matter, since resizing images by HTML
    just makes the images look awful.

    There's another way to do this, using absolute positioning, but then you'll
    need both images to be at a fixed position on your web page (not
    recommended).

    --
    Kim André Akerø
    -
    (remove NOSPAM to contact me directly)
     
    Kim André Akerø, Jan 27, 2004
    #2
    1. Advertising

  3. Lee Harris  web

    Lee Harris Guest

    "Kim André Akerø" <> wrote in message
    news:4016c2d4@proxy....
    > "Lee Harris web" <> skrev i melding
    > news:...
    > > I have the following code which places a background image which doesnt
    > > tile very well in a logo banner "frame" at the top of a page, such
    > > that it always fills the window, whatever resolution is used
    > >
    > > <DIV id=logo><IMG style="WIDTH: 100%; HEIGHT: 150px"
    > > alt="Bombers Links Tours 2003"
    > > src="images/2004banner.jpg"></DIV>
    > >
    > > here is my CSS
    > > #logo {
    > > color: #000;
    > > background-color: #b0ceb4;
    > > border-bottom: 1px solid #000;
    > > }
    > >
    > >
    > > what I would like to do is have the img in the #logo css but still at
    > > the 100% style and then be able to put a transparent bg gif in the
    > > actual div on the webpage so it overlays on top of the background, but
    > > that image would not be rescaled (but the bg underneath would)
    > >
    > >
    > > so, something like this ( I know this isnt the right syntax - that is
    > > what I am asking - is this possible, and what is the correct syntax to
    > > achieve it?)
    > >
    > > <DIV id=logo><IMG src="images/somethingelse.GIF"></DIV>
    > >
    > > here is my CSS
    > > #logo {
    > > color: #000;
    > > background-color: #b0ceb4;
    > > border-bottom: 1px solid #000;
    > > background-image:url (style="WIDTH: 100%; HEIGHT: 150px" alt="x"
    > > src="images/2004banner.jpg")
    > > }

    >
    > In that case, the correct syntax would be:
    >
    > CSS:
    > #logo { color: black; background-color: #b0ceb4; border-bottom: 1px solid
    > black;
    > background-image: url(images/2004banner.jpg); background-repeat:
    > no-repeat;
    > background-position: top left;
    > }
    >
    > HTML:
    > <div id="logo"><img src="images/somethingelse.gif"></div>
    >
    > The <div> will NOT resize the background image, you'll have to do that in
    > your graphics program - which doesn't matter, since resizing images by

    HTML
    > just makes the images look awful.
    >
    > There's another way to do this, using absolute positioning, but then

    you'll
    > need both images to be at a fixed position on your web page (not
    > recommended).
    >
    > --
    > Kim André Akerø
    > -
    > (remove NOSPAM to contact me directly)
    >
    >



    I don't think you actually read my question.
     
    Lee Harris, Jan 31, 2004
    #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. Jacobus Terhorst
    Replies:
    5
    Views:
    382
    Ken Cox [Microsoft MVP]
    May 15, 2005
  2. JD
    Replies:
    5
    Views:
    1,782
    Dan Abrey
    Aug 12, 2004
  3. param
    Replies:
    3
    Views:
    1,670
    mearvk
    Dec 7, 2006
  4. muelli75
    Replies:
    41
    Views:
    1,274
    cwdjrxyz
    Sep 1, 2010
  5. Dylan Parry
    Replies:
    1
    Views:
    400
Loading...

Share This Page