Page 1 of 2

Image in background?

Posted: Fri Apr 21, 2006 4:42 am
by m0u53m4t
I've got an image I want as the background image in my table, and this is the scrip I'm using:

<img src="background2.jpg" style="z-index: -1">

But when I go on the site, its not in the back. Its just a normal image. What am I doing wrong?

Posted: Fri Apr 21, 2006 4:56 am
by matthijs
If you want to place the image as a background-image for a specific element, use css:

Code: Select all

html:
<div id="maincolumn">This div element has a background img</div>

css:
#maincolumn {
  background: url(images/somebackgroundimage.gif) no-repeat top left;
}

Posted: Fri Apr 21, 2006 6:01 am
by m0u53m4t
Doesn't putting something in the style tags do the same as a css file would?

Posted: Fri Apr 21, 2006 6:07 am
by JayBird
m0u53m4t wrote:Doesn't putting something in the style tags do the same as a css file would?
Yep

Posted: Fri Apr 21, 2006 7:00 am
by m0u53m4t
So why doesn't <img src="background2.jpg" style="z-index: -1"> work?

Posted: Fri Apr 21, 2006 7:07 am
by Chris Corbyn
m0u53m4t wrote:So why doesn't <img src="background2.jpg" style="z-index: -1"> work?
Because the <img > tag is a block-level page element, not a property of an element.

Posted: Fri Apr 21, 2006 7:44 am
by matthijs
Of course you can add the stylerules directly to an element. I don't know about an image. But it sounds kind of silly to me :)

Code: Select all

<div id="maincontent" style="color:#555;background:#111;" >

</div>

Posted: Fri Apr 21, 2006 7:49 am
by m0u53m4t
Ok, so if i have my table tags like this:

<td valign="top"></td>

What do I have to do to give it a non-repeating background thats at the top vertically and centered?

Posted: Fri Apr 21, 2006 8:21 am
by feyd

Posted: Fri Apr 21, 2006 9:28 am
by Maugrim_The_Reaper
It's been noted already about using style="< add style >" - same goes for <td>. You can even replace your valign attribute with a CSS style inside the style attribute...

Posted: Sat Apr 22, 2006 7:34 am
by m0u53m4t
That would make all of my tables look like that. i only want one to. How can my style only apply to one thing?

Posted: Sat Apr 22, 2006 10:35 am
by Chris Corbyn
m0u53m4t wrote:
That would make all of my tables look like that. i only want one to. How can my style only apply to one thing?
Use an ID attribute or a class attribute. I strongly suggest you read up on CSS ;)

Posted: Sat Apr 22, 2006 12:16 pm
by m0u53m4t
It doesn't seem to work for me... I've got <link href="/web-content/style.css" rel="stylesheet" type="text/css"> written in, and the file content is

.background { z-index: -1 }
background { z-index: -1 }
#background { z-index: -1 }

Just to be sure, and my img tag is <img src="background2.jpg" border="0" class="background"> But its not in the background. Any ideas?

Posted: Sat Apr 22, 2006 2:40 pm
by feyd
z-index has nothing to do with placing an image in the background. If you want to use it, the element must be positioned as well.

Posted: Sun Apr 23, 2006 6:10 am
by m0u53m4t
Really? But I thourght z-index puts it on a further back layer :roll: