Why doesn't the image load when dynamically loading css in asp.net?

Question

I am loading a css file dynamically by making the link style attribute a server tag.

All of the css loads fine except for the image. It just shows the alternate text. I am doing this in the page_load event.

Here is a snippet of my img markup:

<img class="logourl" alt="Header" />

Here is a the css for logourl:

.logourl
{
background-image:url(../images/a-logo.png);
width:169px;
height:61px;
margin-top:5px;
}

When I right-click on the image and view properties, it is blank (size, address, etc).

Answer 1

To put a background-image on an IMG tag, according to http://www.contentwithstyle.co.uk/content/css-background-image-on-html-image-element you'll need to apply a CSS padding and make sure you're using display:block.

Also, if this is a directory-path issue, the image must be relative to the location of the CSS file it's referenced from. Try using an absolute path to verify that this is indeed the problem, then experiment with various relative paths to see if that it gets solved.

If it's still unsolved at that point, I'd suggest trying Fiddler (www.fiddlertool.com) which will let you see HTTP requests being made-- specifically the actual URL being requested by your browser. Make sure to clear your cache first before reloading the page under Fiddler, so you'll be sure to actually make the request and not pull from cache. Anyway, there will be three possible cases:

1. Fiddler does not show you requesting a URL at all. This points to some issue with your CSS (e.g. not being loaded properly, or a syntax error)
2. Fiddler shows the image URL being requested, but it shows a 404 (not found) or other error. this means the wrong URL is being requested, or there's a problem with your web site's serving of images from that folder
3. Fiddler shows the correct URL, and it's getting a 200 status (success) from the server. If this happens, I'm stumped!

Right-click will only show you SRC of an IMG tag. when using a background CSS, you'll need view source.

Answer 2

I wouldn't call that loading the CSS file dynamically. You are setting the attribute in the link tag dynamically, but the CSS file is loaded the same way as any other CSS file. The browser doesn't see any difference from any other link tag, so the dynamically set url is not part of the problem.

Where are the image and the css files located? Remember that the url is relative to where the CSS file is, not where the page is.

Note that even if you mangage to set the background image for the image, it will still show the alt text on top of the image and indicate that the image is not loaded. The background-image attribute does not set the source of the image. You should just use a div element instead of the image element.

Answer 3

<img class="logourl" alt="Header" />

Can an <img> tag have a background-image property???? That doesn't even make sense.

According to MSDN, the img object doesn't have this property, so I'd say it's safe to assume it's not supported in IE.

Are you sure you don't want a span, a hyperlink, or some other property where a background-image would make sense?

edit

I just read @Justin Grant's answer. I guess that you can use a background image on an image tag, but I'm keeping my answer because it seems a silly way to do it. if what you want is a frame around your image, I would create a div or span with a set width and height, and an img slightly smaller inside it.