Background image? Z-Index?

[mordie]

I have a template that I'm trying to customize. It has a left sidebanner div and image.

How do I get text to appear on top of the image? By making the image a background-image in CSS? By specifying z-index?

Your help is GREATLY appreciated (Understatement of This New Year).

<Domain name removed.
See Forum Charter [webmasterworld.com]>

[edited by: tedster at 2:20 pm (utc) on Jan. 2, 2007]

[penders]

I would certainly consider a background-image in your CSS. It's the easiest/cleanest method. It also won't print (by default) - which is usually the desirable outcome.

If you keep it as an <img> then you will need to mess around with absolute/relative positioning, to position the text (contained in another DIV possibly) on top of the <img> - and yes, you *may* need to adjust the z-index of the positioned <img> / DIVs.

HTML:

<div id="sidebanner">Some text that appears on top of my background-image.</div>

CSS:

#sidebanner { 
background-color:#ccf; /* In case img doesn't show */ 
background-image:url(img/mybackground.gif); 
background-repeat:no-repeat; 
}

[mordie]

Thanks much, penders, but it's not working.

I have a div already that looks like this:

.sidebanner-frontpage {
clear: both; float: left; width: 160px; margin: 0px; padding: 0px;
}

I added your code and text but the image doesn't appear. Then I just created a new div inside this one but same thing . . . no image showing.

Any ideas?

[alfaguru]

Remember that the image URL is relative to where the CSS is, so if you have a stylesheet file style/style.css and an image file images/bg.jpg, the URL needs to be specified as

url(../images/bg.jpg)

Does that help?

[mordie]

I've tried that and still my image is unseen.

What else could this be, do you think?

Thanks so much.

[tedster]

Is the path to the image file correct? I see you are using a relative url, so it should be relative to the css file, not relative to the html file.

[mordie]

Thanks, everyone.

I've tried the suggestion so that my CSS looks like this:

background-image:url(../images/sidebanner_blue_2A5395.jpg);

Then I tried this:
background-image:url(./images/sidebanner_blue_2A5395.jpg);

Then this:
background-image:url(/images/sidebanner_blue_2A5395.jpg);

And this:
background-image:url(images/sidebanner_blue_2A5395.jpg);

And even all the above with a single quote (') inside the parentheses!

But I get the same result: no image! What else could this be?

Thank you for your help.

[penders]

Hhhhmmm, I would have made the same suggestion as alfaguru, regarding relative paths. I must admit, however, that I would tend to avoid relative paths in external CSS files, and use root-relative paths instead if possible (with a preceeding slash '/') eg. "/img/mybackground.gif" - which means the stylesheet can be moved around and the images can still be found. (Plus some, possibly now historic, browser incompatibilities regarding relative paths in CSS files.)

Do you have class/id the correct way round...? I used an ID in the example above. Whereas you've defined a 'class' in your CSS - which is OK, as long as your DIV has a class and not an ID:

<div class="sidebanner-frontpage">Some text...etc...</div>

If you are using an external stylesheet, try having your styles (background-image) embedded in the HTML doc to test it?

If you're still having problems, then paste your HTML and CSS here and we can have a look.

(EDIT: Just seen your new post(s)...)

- Are you testing this on a webserver, or just your local file system?

From the root of your intended webspace:
- Where is your CSS file?
- Where is your background image?
- Where is your HTML file?

[mordie]

Thanks, penders, again.

My HTML page is in my root directory. Under that is my Images folder (where my background image is located) and also my CSS folder (where my style.css folder is).

And, yes, I've test on both my local and on the Web.

[mordie]

RESOLUTION:

It turns out, folks, that my background-image was there the whole time. My error was not defining a height property of the div that it was put in; I had only stipulated the width.

Thanks, all, for your help.

[cmarshall]

Not necessarily. Test it on several browsers.

I use background-image properties extensively in my sites, because they allow the entire site to be controlled by CSS, and makes hovering more interesting and JavaScript-less.

However, background-images have one nasty flaw: They always draw last. This means that when you hit my beautiful site, it can take several seconds for all that beauty to render. I consider it a trade-off, as caches will let the site render quickly after the initial hit.

It can also result in slow hover behavior on large pages.

Now, your issue: It looks like you are specifying a container to hold the background, and then filling it with floaters.

The problem with doing that, is that the floaters don't count as <div> contents, so they don't cause it to expand. Some testing should show you that not all browsers handle the height attribute well for a <div> like that.

What I do is to specify a "clear" <div> after the floaters, and that forces the container to expand to the correct size. Like so:

<div id="container" style="width:500px;background-image:url(some500PixelImage)">
<div id="floater1" style="float:left">SomeContents</div>
<div id="floater2" style="float:right">SomeContents</div>
<div id="clearance" style="clear:both"></div>
</div>

[mordie]

Thanks, cmarshall, but I didn't quite get that.

Specifically, I don't understand what class or id I need to create in my external stylesheet.

[cmarshall]

Specifically, I don't understand what class or id I need to create in my external stylesheet.

You'll have to transpose what I gave you. I just outlined the concept, using inline styles (I would normally put them in an external stylesheet). Just figure on taking what is in the style="" quotes, and sticking them into a stylesheet.

Except different. I sincerely doubt that this is code that would automatically translate directly to your own pages. You need to study them for the concept I'm illustrating, then apply that concept to your own context.