Background images not showing on https pages

I've looked at this thread

https://www.zen-cart.com/showthread.php?212803-Background-Image-Consistency-via-http-vs-https&highlight=background+image

and checked that hotlinking protection is turned off on my server control panel.

My background images are coded like this

body {margin: 0;background: #444 url(../images/bk.png) repeat-x;font-family: 'Arial';font-size: 72.5%;color: #444;}

and I get a page not found when trying to view the background image in a browser.

Any ideas? the https page is at http://urlgone.com/4658d5/ (you'll have to skip the ad that comes up I'm afraid) and there should be a black band behind the mega menu as there is on the home page

It looks like it might be to do with the css minifier I have turned on - turning it off breaks the template. Time for a closer look.

Link broken - no style(css)

My background images are coded like this
I assume that this is in your stylesheet???

You might try taking out the shorthand and fully coding it more correctly like

        background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	background-color: #444;
	height:75px;
        font: arial;
        font-size; 72.5%;
        font-color; #444;

Yes sorry, I had to disable SSL while I took a break - it's back on for the time being.

Yes, that code was in my stylesheet. Changing it to

body 
{
margin: 0;
background-image: url(../images/bk.png);
background-repeat: repeat-x;
background-color: #444;
font-family: 'Arial';
font-size: 72.5%;
color: #444;}

had no effect.

What seems to be happening; on https pages the path to 'normal' images is:

h t t p s://supersonic.accountservergroup.com/~myaccountname/mywebsite.co.uk/includes/templates/mytemplate/images/image.png

Whereas the path to background images is:

h t t p s://supersonic.accountservergroup.com/includes/templates/mytemplate/images/image.png

So it seems to be related to the fact I'm using a shared SSL from my hosting company as the /~myaccountname/mywebsite.co.uk is getting stripped from the background-image url.

If I change the css to

body 
{
margin: 0;
background-image: url(https://supersonic.accountservergroup.com/~myaccountname/mywebsite.co.uk/includes/templates/mytemplate/images/bk.png);
background-repeat: repeat-x;
background-color: #444;
font-family: 'Arial';
font-size: 72.5%;
color: #444;}

Then all's well. However hard coding the background images to the https version doesn't seem ideal. Perhaps there's something I can do to my configure.php although I doubt it.

I wonder if anyone else using a shared SSL is having the same problem with background images?

It sounds like you're already using the CSS/JS Loader. Please verify, one of my sites used to use shared SSL and I had the same issue, solvable via a conditional CSS/JS autoload.

Your thought on modifying your configure.php files is on target. Ideally, DIR_WS_HTTP and the HTTPS equivalent are the same, with the remaining content in HTTP_SERVER and the HTTPS equivalent. This should have been performed by the install/upgrade process. Sorry, long day and I don't recall the specific constants at the moment.

mc12345678:

Your thought on modifying your configure.php files is on target. Ideally, DIR_WS_HTTP and the HTTPS equivalent are the same, with the remaining content in HTTP_SERVER and the HTTPS equivalent. This should have been performed by the install/upgrade process. Sorry, long day and I don't recall the specific constants at the moment.
FWIW, this is **not **something that can be corrected via a change to the configure.php files. The issue is that there are images referenced via CSS that are no longer accessible when running under the shared-SSL path.

lat9:

It sounds like you're already using the CSS/JS Loader. Please verify, one of my sites used to use shared SSL and I had the same issue, solvable via a conditional CSS/JS autoload.

Or I could be completely wrong. :P

Didn't copy the additional text, but that was something I was thinking about/wondering and trying to figure out how was "directly" tied in... (Not so direct.)

lat9:

It sounds like you're already using the CSS/JS Loader. Please verify, one of my sites used to use shared SSL and I had the same issue, solvable via a conditional CSS/JS autoload.

Sorry it took so long to get back.

Yes, I am using the CSS/JS Loader v3.0.5. What would the conditional autoload need to load?

You'll need two file changes. First, create the https_images.css file that contains only the image-related references, with those references based on your shared-SSL server, for example:

body {background-image: url(https://supersonic.accountservergroup.com/~myaccountname/mywebsite.co.uk/includes/templates/mytemplate/images/bk.png);}

Then, update one of files (or create a new file) in /includes/templates/YOUR_TEMPLATE/auto_loaders to contain:

if ($request_type == 'SSL') {
  $loaders[] = array('conditions'    => array('pages' => array ('*')),
                     'css_files'     => array('https_images.css' => 20002),
                    );
}

Leave your normal stylesheet alone, picking up the images using the ../images notation. That path to the files will be picked up on non-SSL accesses.

lat9:

You'll need two file changes. First, create the https_images.css file that contains only the image-related references, with those references based on your shared-SSL server, for example:

body {background-image: url(https://supersonic.accountservergroup.com/~myaccountname/mywebsite.co.uk/includes/templates/mytemplate/images/bk.png);}

> Then, update one of files (or create a new file) in /includes/templates/YOUR_TEMPLATE/auto_loaders to contain:
> ```
if ($request_type == 'SSL') {
  $loaders[] = array('conditions'    => array('pages' => array ('*')),
                     'css_files'     => array('https_images.css' => 20002),
                    );
}

Leave your normal stylesheet alone, picking up the images using the ../images notation. That path to the files will be picked up on non-SSL accesses.

This is great, thank you.

Somethings not quite right though. I've created the css file and a new autoloader file with the contents

<?php
if ($request_type == 'SSL') {
  $loaders[] = array('conditions'    => array('pages' => array ('*')),
                     'css_files'     => array('https_images.css' => 20002),
                    );
}

The https_images.css does not appear in the page source on https pages - the login for example. If I remove the SSL condition check so the code looks like

<?php

  $loaders[] = array('conditions'    => array('pages' => array ('*')),
                     'css_files'     => array('https_images.css' => 20002),
                    );

then the https_images.css is applied and is in the page source of the https page.

Seems a bit strange

Yes, the $request_type is set pretty early in a page's generation. I'm not sure how the version of the CSS/JS loader I was using compares to yours, but you could try adding a global statement in case that code is pulled in by a function call:

 
<?php
[B]global $request_type;[/B]
if ($request_type == 'SSL') {
  $loaders[] = array('conditions'    => array('pages' => array ('*')),
                     'css_files'     => array('https_images.css' => 20002),
                    );
} 

That'll do nicely, thank you for your help.