Hi,

 I have a problem with displaying a background image in a table cell with repeat x set.

In the CSS I have:

.welcomeHeader
{
    BACKGROUND-IMAGE: url(images/other/shadowheader.jpg);
    BACKGROUND-REPEAT: repeat-x;
    font-size: 16px;
    background-attachment: fixed;
    font-family: Arial, Verdana;
    height: 21px;
    color:Red;
    width: 550px;
}

In the .aspx page I have this:

<table class="welcomeHeader" >

' stuff in the table cell 

</table>

Now when I preview it in VS, it shows the shaded border behind the red text.

However when I run it, no background image appears.  Why does it appear in the preview in VS but NOT in the running version of the app?

This is becoming an annoying 'feature' of VS ASP.NET, things rendering ok so everything looks find and dandy, but you get a nasty surprise when you run it. I feel like I'm developing through trial and error.

The CSS file is stored under MyTheme under App_Themes.

Any help would be appreciated, thanks.

if it's in the table header you might want to use the <th></th> and add that to your style sheet.

.welcomeHeader
{
    font-size: 16px;
    background-attachment: fixed;
    font-family: Arial, Verdana;
    height: 21px;
    color:Red;
    width: 550px;
}

.welcomeHeader th

{

  BACKGROUND-IMAGE: url(images/other/shadowheader.jpg);
    BACKGROUND-REPEAT: repeat-x;

} 

then

<table class="welcomeHeader">

<tr><th>content for cell with background</th></tr>

</table>

 You could do the same with the td tag as well.

 Another option would be to just create a class for that background and apply it directly to the th or td tags

.bgcell

{

  BACKGROUND-IMAGE: url(images/other/shadowheader.jpg);
    BACKGROUND-REPEAT: repeat-x;

}

<table>

<tr><td class="bgcell">content for cell</td></tr>

</table>

hope this helps.

 

Ok thanks for the suggestions.  I'm having problems when i try to put these lines in a class in a CSS file though.

If I specify them inside the 'style' attribute in the designer then the image is repeated ok (although not rendered in the design view, only seen at runtime).

Any ideas? 

In your original post, you had some styles in the CSS as all upper case; CSS is supposed to be all lower case, so try changing that.  Second, I've had some issues with having background images being 'fixed' in places other than the page background.  Try using 'scroll' instead.

Post your CSS and the bit of code that uses it, if this doesn't work.

CSS is NOT case-sensitive, but XML and XHTML are case-sensitive. Mixing uppercase and lowercase in CSS should not be an issue.

All CSS style sheets are case-insensitive, except ... http://www.w3.org/TR/REC-CSS2/syndata.html#q4

I'm echoing what tfsmag said; don't use the Visual Studio Design view, it doesn't display your web design properly.

It was certainly implied.

Your previous post:

CSS is supposed to be all lower case, so try changing that.

css is case sensitive depending on the browser, no? I could have sworn I had issues with firefox where i had to change the case of a class name to match what was in the css file for it to render correctly in firefox.

Ok some more info...  The class is as follows (stored in a .css file under the theme directory):

.welcomeHeader
{   
    padding-left:5px;
    font-size: 14px;
    background-attachment: fixed;
    font-family: Arial, Verdana;
    height: 21px;   
    width: 550px;
    text-align:left;
}

.welcomeHeader th

{
    background-image: url(images/other/shadowheader.jpg);
    background-repeat: repeat-x;
    color:Green;
}

I've tried setting both the page stylesheettheme & pagetheme attributes to 'MyTheme' which has the relevant CSS file underneath.
The ASP source looks like this:

<table class="welcomeHeader" style="width: 100%" >
                    <tr>
                        <th  style="width: 546px">
                            <br />
                            Welcome
                            <asp:LoginName ID="LoginName1" runat="server" Font-Bold="True" />
                            &nbsp;(<asp:Label ID="lblUserEmail" runat="server" Text="Users Email"></asp:Label>).&nbsp;
                            Your last visit
                            was at
                            <asp:Label ID="lblLastLogin" runat="server" Font-Bold="True" Text="Last Login"></asp:Label>

                        </th>
                    </tr>
</table>

The correct CSS is obviously being picked up because the font turns GREEN, however absolutely no sign of the background image.

My mind has been boggling me for ages on this.

where you're calling the image in your css on this line

background-image: url(images/other/shadowheader.jpg);

try including the full path from the root.

background-image: url(/yourappname/images/other/shadowheader.jpg);

 i've had to do this in the past to get something to render correctly.
 

You may be interested in using Firebug to expedite your debugging process. Firebug lets you click on HTML items on your rendered webpage and view the CSS that has been applied.

you could also try setting:

background-color: blue;

In an effort to test whether your background styles are being applied.

What you need to do is tell the browser where to start tiling the image.  To do this, you need to set background-position:, and if you have an external style sheet, Visual Studio will give you some run-time values (i.e. center), or you can give absolute values.  These values are relative to the upper-left  point of the element, just like when setting absolute positioning for elements on the page.

Instead of declaring each part of the background style individually, you could use the line below (which I used in testing):

background: transparent url(images/other/CheckMark.jpg) repeat-x scroll top top;

(Color, image url, repeat, attachment, position)

 I've had problems in IE and Firefox if I declare 'fixed' on a background image, i.e. IE won't display it; Firefox will, but the image scrolls through as the user scrolls down the page.  I haven't had any problems with scroll.

This style works for me. 

<style>
.welcomeHeader
{   
    padding-left:5px;
    font-size: 14px;
    background-attachment: fixed;
    font-family: Arial, Verdana;
    height: 21px;   
    width: 550px;
    text-align:left;
    background-image: url(background.jpg);
    ;background-repeat: repeat-x;
}

.welcomeHeader th

{

    color:Green;
}
</style>

Try "../" as a path prefix.

.welcomeHeader
{
    BACKGROUND-IMAGE: url(../images/other/shadowheader.jpg);
...