background-images do not display within div tags

Hi,

At one time this worked... now for some unknown reason the images are not loading in the header and navigation area of this website: www.inmemorysigns.com.

I've attached the css sheet for your reference. Can anyone please tell me how to display the images properly?

Thank you,
-Kara

 

google up faux columns.

 

try to change
background to background-image

if it's not working, try to remove background-color


#header {
height: 225px;
width: 748px;
background-image: url(images/header.jpg) no-repeat;
background-color:#FFFFFF;
background-position: bottom;
float:left;
}

#navigation {
background-image: url(images/navigation.jpg) no-repeat;
background-position: left;
background-color:#FFFFFF;
width: 175px;
height: 331px;
float: left;
}

 

To the poster above, background-image: url(foo.jpg) no-repeat is INVALID. there should be 1 not 2 values, just the url method. And removing a background color won't make a difference.

 

Thank you for your interest Soulscratch - Please correct me if I am wrong, but if you know the other poster is wrong, it sounds like you might have the solution.... would you please share this solution with me? I googled faux columns as you suggested but am not finding the solution. I've found articles on how to make faux columns the same size - but not how to make an image show up that is missing. In Firefox - the place holder for the images is blank and in IE the columns aren't created at all.

Thank you for your suggestion HiMambo but it did not work.

If anyone has a solution for me it is greatly appreciated.

 

I fixed it in Firefox:

background-image: url(http://www.inmemorysigns.com/images/header.jpg);
background-repeat: no-repeat;

but it still does not work in IE... any ideas?

 

looks like you got it.. looks fine in IE now.. maybe refresh a few times? i first thought you were having a problem because the left col looks all cut off without a repeating background below it..

 

Thank you. Many refreshes and then a clearing of the cache made it work! lol - again thank you for your help.

 

Cache is mostly a pain in the ass for us developers, heh.. glad you fixed it!

 

Well, that's not ENTIRELY the correct answer. For background-image yes - what SHOULD be typed there is just 'background'

background:#FFF url(images/header.jpg) bottom center no-repeat;

Also, just 'bottom' will make the images not show up in some flavors of IE - IE requires that BOTH positionings, x and y, be stated. (pain in the ass)

 

Also use Ctrl + F5 for full page refresh in IE!

 

I was very confused because the tool I'm using, Expression Web, displayed the background in the div as expected but the browsers did not.

What a strange bug, and how interesting that different browsers all have the same bug. I decided to experiment, starting with this:

background: transparent url('img/faintlogo.jpg') no-repeat fixed left bottom;

Code (markup):

That failed in IE7, FireFox and Safari, but changing fixed to scroll worked! Then I tried this:

background: transparent url('img/faintlogo.jpg') no-repeat left bottom;

Code (markup):

It worked but I don't like it, as I prefer to include all attributes when using the long form. I finally settled on the form proposed here earlier and all is well.

background-image: url('img/faintlogo.jpg');
background-repeat: no-repeat;
background-position: left bottom;

Code (markup):

Thanks to all for the useful tips in this thread.

Will

 

<adam>Well there's your problem</adam>

Do yourself a HUGE favor, get this 'tool nonsense out of your head, take anything more complex than a flat text editor, be it dreamweaver, frontpage, Expression Web, and pitch it into the trash.

The ONLY thing you can learn from tools like that is how NOT to design a website. Grab a text editor - editplus, Notepad++, win32pad, Crimson editor - hell, even regular notepad is better, then test in the actual browsers - to HELL with that 'preview pane' nonsense.

Remember, Dreamweaver is allegedly head and shoulders over Frontpage (and for all the claims, Expression Web is frontpage with a new name!) and so far as the quality of those sorts of programs, the only thing about them that can be considered "professional grade tools" are the people who promote their use.

 

Opinions vary.

I have used both Dreamweaver and FP/xWeb. I prefer xWeb. I think Dreamweaver is a better choice when building Cold Fusion sites. I think xWeb is a better choice for any site containing ASP.NET (although it stupidly no longer supports ASP).

Last year I ran a development team building a LAMP-based site. We used Coda, a fine product. Coda is not the first HTML editor I've used. Despite the availability of good edtors for the PC, I prefer a more integrated development environment, especially one with site management features. Both xWeb (since FP2003) and Dreamweaver (since v4, I think) support the dynamic Web template system, a very effective and productive way to build small, non-dynamic sites and a feature I value.

It seems to me that you are railing against the WYSIWYG products. Your point is well taken given their history. But just because I'm using xWeb does not mean I'm building the sites WYSIWYG - I spend most of my time in the code editor.

And speaking of the code editor, a comparison between xWeb's editor and other contemporary editor-only products is certainly not going to give xWeb a win. The xWeb editor lacks many features, has rough edges, and only within the last year or so has supported things like PHP more directly. However, the editor does have many excellent capabilities, most of which have been present since FP98. A good example is search and replace, which was vastly superior to the same feature in most editors up until about two years ago. Search and replace has also supported regular expressions since before most Web developers knew what they were.

In any event, the point of my post was that xWeb previewed as expected but the browsers did not render as expected. It's hard to see how xWeb getting it right is a HUGE reason to switch to Notepad.

Regards,
Will