background images and divs

Hi All,

I am trying more and more to incorporate CSS into my work here. I have
currently been playing around with fluid design and tableless layout.

Currently I am trying to make a background image show up in a div that
is designated by an id. The image is not appearing and after doing some
googling I'm still a bit lost. Is it possible to display a background
image in a div ID? Can someone school me a bit on this? I have supplied
a link to the test page below. I know the image is in the correct
directory because I can make it appear with a basic img tag.

http://ocg6.marine.usf.edu/patrick/test_css/test.html

Any help would be greatly appreciated.

Thanks,

Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group – USF - College of Marine Science
http://ocgweb.marine.usf.edu Phone: 727 553-3334

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld

Patrick wrote:

Currently I am trying to make a background image show up in a div that
is designated by an id. The image is not appearing and after doing some
googling I'm still a bit lost. Is it possible to display a background
image in a div ID? Can someone school me a bit on this? I have supplied
a link to the test page below. I know the image is in the correct
directory because I can make it appear with a basic img tag.

http://ocg6.marine.usf.edu/patrick/test_css/test.html

You first set: background-image, and then "background:#FFF;

Just 'background', overrules all the other styles, since it's the
shorthand. Change it into background-color:#FFF; and the image
appears.

Or put it all in the shorthand instead, and save some bytes:
background: #FFFFFF url(backfilled-samp.jpg) no-repeat;


Note: Your image is grey. Best set the background colour also to that
colour, so that for instance white letters will still be readable in
case someone isn't seeing the background image.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Els wrote:

Patrick wrote:


Currently I am trying to make a background image show up in a div that
is designated by an id. The image is not appearing and after doing some
googling I'm still a bit lost. Is it possible to display a background
image in a div ID? Can someone school me a bit on this? I have supplied
a link to the test page below. I know the image is in the correct
directory because I can make it appear with a basic img tag.

http://ocg6.marine.usf.edu/patrick/test_css/test.html


You first set: background-image, and then "background:#FFF;

Just 'background', overrules all the other styles, since it's the
shorthand. Change it into background-color:#FFF; and the image
appears.

Or put it all in the shorthand instead, and save some bytes:
background: #FFFFFF url(backfilled-samp.jpg) no-repeat;


Note: Your image is grey. Best set the background colour also to that
colour, so that for instance white letters will still be readable in
case someone isn't seeing the background image.

Thank You Els,

That did the trick.

Next I am going to be trying to put a div in the center div and have it
align perfectly over the darker gray box in the background image and
have it stay there no matter how the user resizes their browser window.
The dark gray are of the background image was put there on purpose to
show me where to align the div to.

I'm sure I'll be back for more pointers, but I hope not.

Thanks again,

Patrick

PS Sorry to double post. I was originally trying to cross post to
another group but my server or mozilla wouldn't let me do it.
--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group – USF - College of Marine Science
http://ocgweb.marine.usf.edu Phone: 727 553-3334

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld