Background jpg image not displaying from SSL site

[fugrat]

I have just above zero knowledge of CSS so please excuse if my question is really simple but here goes..

We have a product that we are developing and it is possible to apply external branding using CSS. There are 2 environments that use the same CSS files, but one has a HTTPS link to the CSS file and images whereas the other is a plain HTTP link. The environment using the HTTP link works fine and displays as it should, however the one that links to the CSS file on a HTTPS webpage lays out the page correctly apart from the background. The HTTPS CSS file has been modified to use relative URLs as opposed full URLs, but if I set the background to the full URL on the HTTPS site it still doesn’t work! The background image is a jpg, and if I convert it to a PNG it also works ok. Has anyone experienced this before or have any ideas how I can start to troubleshoot this?

Thanks

[shaneisme]

An HTTPS-only server, one that blocks everything except coming in on port 443 (for example), won’t even see your request coming in from HTTP. I’m not sure if that’s what you’re dealing with, but it sounds like it.

Are these static files required to be on this HTTPS-only server? If so why? Are you not in control of said server?

[LewisCowles1986]

simple method is to use // instead of http:// or https://
this will force the browser to use the current protocol on whatever the url is. so…
//fonts.googleapis.com/css?family=Russo+One
instead of any clever server-lang or https versions…

If the content is on the same server i.e. 1 server or 1 domain name, then try /path/to/image/url (notice the lack of domain name!). Just prefixing with “/” tells the browser, this site url (+port gets kept too) and file X

so to recap
http://www.mysite.com/wp-content/uploads/2014/08/foobar.jpg
becomes
/wp-content/uploads/2014/08/foobar.jpg
and
http:// or https:// becomes //

[shaneisme]

I believe he already did that:

The HTTPS CSS file has been modified to use relative URLs as opposed full URLs

[LewisCowles1986]

shaneisme, I did not just tell him to use relative URLs // is an absolute url as it includes the site, but not the protocol.

Also if he was really using only relative URL’s there would be no issue with HTTP vs HTTPS resources, it only requires basic knowledge of web browsers and using a correct and valid URI.

Your comment
<div>An HTTPS-only server, one that blocks everything except coming in on port 443 (for example), won’t even see your request coming in from HTTP. I’m not sure if that’s what you’re dealing with, but it sounds like it.</div>

Shows you were even assuming there were absolute URI’s as relative URL’s match protocols and ports; He even mentions using an absolute URL for the background image so I really have no clue why you feel the need to chastise me for a practical example of two ways to solve the issue if it was as a result of HTTP vs HTTPS.

Seeing as we are now chastising one another, he mentions it works on HTTP, meaning he does not have a HTTPS only webserver…

<div>There are 2 environments that use the same CSS files, but one has a HTTPS link to the CSS file and images whereas the other is a plain HTTP link.</div>

[shaneisme]

LOL

[Author]

Posts