PDA

Click to See Complete Forum and Search --> : Background images for DIV

Rodders
07-23-2003, 05:19 PM
I've got an image that I want to use as a background within a DIV tag. I'm not sure if that's possible as such, so my approach is to use layers. I'm not a CSS expert, so I'm having problems getting it to look right.

The DIV is centered horizontally on the page using the CENTER tag. The DIV will have the same WIDTH and HEIGHT as the image itself so that the image fills it entirely.

Then I want some text to be centered within the DIV, but laying on top of the image.

I'm not sure whether I need 2 DIVs, or 1 DIV with the image and text having their own IDs for positioning.

EDIT - here's a URL.... www.c2h2.co.uk/biog.php (http://www.c2h2.co.uk/biog.php)

Anyone got any suggestions ?

Thanks

Rich
Charles
07-23-2003, 05:52 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>
<div style="background:fixed no-repeat url(http://www.bettiepage.com/images/photos/bikini/bikini1.jpg); height:300px; margin:auto; width:139px">&nbsp;</div>

Do not use the CENTER element. The CENTER element, like the FONT element, is bad.
Rodders
07-23-2003, 06:09 PM
Thats' great Charles.

I also found a thread which helped me to position my image in the center of the page using positioning and margins. So thanks to Stefan for that.

I know it bothers you guys when people miss off the DOCTYPE, but I don't understand what they do and which one I should choose. Can you give any pointers?

Thanks again

Rich
Da Warriah
07-23-2003, 08:47 PM
well heres a little helpful article for you:

http://www.alistapart.com/stories/doctype/

they basically tell the browser how to display your page...
zerooito
07-24-2003, 01:50 PM
Hi, folks!...

I just read this post, and I´m curious
about one thing:

How to change the background image
of a div using a javascript function?

Thanx!

Zerooito
nkaisare
07-25-2003, 10:50 AM
Perhaps:
document.divid.style.background='url(newbg.gif)'

If you want to change background onmouseover, you can use CSS method:
div{bakground: url(oldbg.gif)
div:hover{bakground: url(newbg.gif)

It doesn;t work with div in IE, IE requires the element to be a link. Works with all other v7 browsers (Opera 7, NS 7, Moz 1, etc)
zerooito
07-25-2003, 01:06 PM
Hmm.... sure?

Thanx!

The application I´m doing is for IE.

I´ll have some work to implement this.

C ya!

Zerooito