CSS Background Image Problem

Boogle · 09-05-2007, 04:06 AM

Hello peeps,

I am just getting into the whole fancy graphic designing thing but have come across one stupid problem that I can't seem to fix no matter how many blogs/forums i read so hopefully you guys will prove to be the most technically adept!

Basically i'm learning to create fancy menus, content holders etc so... cutting it short IE won't display background images if they're delcared within the stlye="" element of anything!, e.g.

<td background="http://www.v7n.com/forums/images/image123.gif"></td> works just fine BUT this is poor practise and I want to do it properly!

<td style="background: transparent url(images/image123.gif) no-repeat fixed center;"></td> DOES NOT WORK, for some reason IE won't render but you can drag your mouse over it and it's there!?

this is the design view, which works with CSS styles fine (ignore the site it's one i'm maintaining for someone and thus can use it to display my problems!)

This is the rendered view, in the development server mode; I have to drag the mouse over everything just to see that something is there!

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demonstrator.aspx.cs" Inherits="Demonstrator" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Mobility Products UK</title>
    
    <style type="text/css">
    .navmenuhome
    {
    	width:160px;
    	height:35px;
    	background: transparent url(images/staticnavhome1.gif) no-repeat fixed center;
    	font-family: "Trebuchet MS";
        text-align:center;
        vertical-align:bottom;
        color:#ffffff;
        font-size:1.45em;
    }
    .navmenuwho
    {
    	width:160px;
    	height:35px;
    	background: transparent url(images/staticnavwho.gif) no-repeat fixed center;
    	font-family: "Trebuchet MS";
        text-align:center;
        vertical-align:bottom;
        color:#ffffff;
        font-size:1.45em;
    }
    .navmenuwhat
    {
    	width:160px;
    	height:35px;
    	background: transparent url(/images/staticnavwhat.gif) no-repeat fixed center;
    	font-family: "Trebuchet MS";
        text-align:center;
        vertical-align:bottom;
        color:#ffffff;
        font-size:1.45em;
    }
    .navmenucontactus
    {
    	width:160px;
    	height:35px;
    	background: transparent url(/images/staticnavcontactus.gif) no-repeat fixed center;
    	font-family: "Trebuchet MS";
        text-align:center;
        vertical-align:bottom;
        color:#ffffff;
        font-size:1.45em;
    }
    .navmenucommunity
    {
    	width:160px;
    	height:35px;
        background:transparent url(/images/staticnavcommunity.gif) no-repeat fixed center;
    	font-family: "Trebuchet MS";
    	text-align:center;
        vertical-align:bottom;
        color:#ffffff;
        font-size:1.45em;
    }
    </style>
    
</head>
<body>
    <form id="form1" runat="server">
    <div></div>
    <div><img src="Images/Swift Logo 400 wide.jpg" alt="bannerPhoto" /></div><br />
    <br />
    <div style="width:800px;">
    <table>
    <tr>
    <td class="navmenuhome">Home</td>
    <td class="navmenuwho">Who</td>
    <td class="navmenuwhat">What</td>
    <td class="navmenucontactus">Contact Us</td>
    <td class="navmenucommunity">Community</td>
    </tr>
    </table>
    </div>
    
    </form>
</body>
</html>

Basically, does anyone know why it won't render the backgrounds and text within <td>text</td> ?
If i havent submitted enouh info, guys please let me know,

Any help is much appreciated,
Thanks,

Boog's

Costin Trifan · 09-05-2007, 04:21 AM

You have this:
<td style="transparent url(images/image123.gif) no-repeat fixed center;"></td>

Try this:
<td style="background:transparent url(images/image123.gif) no-repeat fixed center;"></td>

____
Edit:
If you can edit your post, edit it and wrap the styles in [ code ]...[/ code ]. This way you'll make chicgeek happy

Boogle · 09-05-2007, 04:23 AM

Sorry, Costin, i wrote that out a bit fast, if you check the code i have already done it correctly in there!

i will edit that post, apologies for the confusion,

Boog's

Costin Trifan · 09-05-2007, 04:26 AM

ahh..sorry, didn't see it...

anyway, still not showing? try this:

<td style="background-color: Transparent; background-image: url('images/image123.gif') no-repeat fixed center;"></td>

see if this works.

Boogle · 09-05-2007, 04:34 AM

No, Costin,that doesn't work either, it's strange because i read that you must emit the code in the following order:

color
url
repeat
attachment
position

and this accomodates, IE's requirements, yet it does nothing! why can't their be just one nice browser that makes life easY!?

Costin Trifan · 09-05-2007, 04:44 AM

Quote:

why can't their be just one nice browser that makes life easY!?

yeah, right!!

It's every web designer dream, but unfortunately, a dream that will never come true

As for practice I always use the long part:

Quote:

background-color: #ffffff;
background-image: url('');
background-position: top left;
background-repeat: repeat;

and not the short one as you did.

And I do have one question though:
Where in your page you want to display that cell with that background image?
I couldn't find it.

Can you be a little more specific about that and if you can attach that image you need I can have a look on my computer and see if I can do something about it.

bratwebdesign · 09-05-2007, 04:54 AM

Does the background render on the text Home and Who? The reason why I ask is because in the style part of the page, Home and Who show the images located in images. While Contact, Community and What show the images located in /images. This could make the background image not show and being that the text is white, it would not show up on a white background.

Boogle · 09-05-2007, 05:17 AM

Guys, thanks for the super fast replies, but i've solved the problem now,

the code in error, which is fully my own fault, was

Quote:

background:transparent url(images/staticnavcommunity.gif) no-repeat fixed center;

it should have been

Quote:

background:transparent url(images/staticnavcommunity.gif) no-repeat scroll center;

Can someone explain that to me please!?

Thanks again, this forum is a dedicated one, i will be showing the same attitude whenever i can help people!

Boog's

Costin Trifan · 09-05-2007, 05:44 AM

Quote:

background-attachment
Sets whether a background image is fixed or scrolls with the rest of the page

http://www.w3schools.com/css/css_background.asp