467,861 Members | 1,690 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,861 developers. It's quick & easy.

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
Jul 20 '06 #1
  • viewed: 2762
Share:
2 Replies
Els
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/
Jul 20 '06 #2
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

Jul 20 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

13 posts views Thread by Giggle Girl | last post: by
3 posts views Thread by Viken Karaguesian | last post: by
3 posts views Thread by seamlyne | last post: by
4 posts views Thread by Gary | last post: by
3 posts views Thread by fletch | last post: by
reply views Thread by jack112 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.