asked on 7/17/2008

CSS: How to use the background-image:url correctly for https

Hi Experts,
I have an ASPNET application which is deployed to many domain names. We also set up SSL for them. However, we get a problem with the CSS element below. The background-image:url style with a relative url isn't seen as "secure", so the style doesn't work correctly. I cannot change it to a full url, such as https://domain_name/images/menu.gif, because the domain names are vary.

.toolsMenuSeparator
{
background-image:url(/images/menu.gif);
...
}

Any help would be appreciated.
Thanks :)

CSS SSL / HTTPS ASP.NET

Last Comment

thuannguy

7/31/2008

abel

7/17/2008

If the current page is secure the relative url is secure. Are you sure it is this image that your browser is complaining about?

Though I doubt if it helps this particular problem, but instead of an absolute path (starting with the "/") you may try a relative path:

background-image:url(../../images/menu.gif);

abel

7/17/2008

And if that doesn't solve this problem (and if, when removing the img, the SSL error goes away) then you could consider using the corresponding masterpage to use the current full path and replace it programmatically.

thuannguy

7/17/2008

ASKER

Hi Abel,
Yes, I'm sure. I tried to use an absolute https url for a specific site and it worked. Of course I cannot do that for all the sites, otherwise it will break the advantage of using CSS.
I also thought about setting the background-image programmatically, but I hope to find an easier way :)

ASKER CERTIFIED SOLUTION

abel

7/17/2008

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

abel

7/17/2008

One other thing: try it with the image on a subpath of your current path. Perhaps security settings of your browser prevent getting it from a higher path... (weird, if it does work correctly for non background images).

Your CSS itself is called using a relative secure link, right?

thuannguy

7/17/2008

ASKER

*Your CSS itself is called using a relative secure link, right?: I need to check this one. It should be a good hint.
Thanks for a lot of suggestion you gave. I will check them soon :)

thuannguy

7/31/2008

ASKER

Hi,
Thank you for your guides. In fact, that's the component which we are using does some mysterious thing on the clientside which causes the problem.
FYI: the CSS file is rendered using https. In addition, when the page is rendered, the relative url works fine. Only when we do some actions on the clientside, the warning appears. And I'm sure that it requests no http resource :)
Anyway, thanks for your help.