Image in background?

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
m0u53m4t
Forum Contributor
Posts: 101
Joined: Wed Apr 19, 2006 7:47 am
Location: Wales

Image in background?

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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;
}
User avatar
m0u53m4t
Forum Contributor
Posts: 101
Joined: Wed Apr 19, 2006 7:47 am
Location: Wales

Post by m0u53m4t »

Doesn't putting something in the style tags do the same as a css file would?
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

m0u53m4t wrote:Doesn't putting something in the style tags do the same as a css file would?
Yep
User avatar
m0u53m4t
Forum Contributor
Posts: 101
Joined: Wed Apr 19, 2006 7:47 am
Location: Wales

Post by m0u53m4t »

So why doesn't <img src="background2.jpg" style="z-index: -1"> work?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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>
User avatar
m0u53m4t
Forum Contributor
Posts: 101
Joined: Wed Apr 19, 2006 7:47 am
Location: Wales

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post 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...
User avatar
m0u53m4t
Forum Contributor
Posts: 101
Joined: Wed Apr 19, 2006 7:47 am
Location: Wales

Post 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?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 ;)
User avatar
m0u53m4t
Forum Contributor
Posts: 101
Joined: Wed Apr 19, 2006 7:47 am
Location: Wales

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
m0u53m4t
Forum Contributor
Posts: 101
Joined: Wed Apr 19, 2006 7:47 am
Location: Wales

Post by m0u53m4t »

Really? But I thourght z-index puts it on a further back layer :roll:
Post Reply