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

L

Lee Harris web

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
 
K

Kim André Akerø

Lee Harris web said:
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).
 
L

Lee Harris

Kim André Akerø said:
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).


I don't think you actually read my question.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,734
Messages
2,569,441
Members
44,832
Latest member
GlennSmall

Latest Threads

Top