Background image not showing on Windows systems

pideja · 2015-04-07 21:18:12

This is the url : lucnadeau.ca
I want a backgroung image instead of a solid color on the background. I created the image and placed it in the "images" folder within the "phplugins" folder. I wrote the script within the "custom css" file as :

body {
    background-attachment: fixed;
    background-image: url(/phplugins/images/background-image.png);
    background-position: center top;
    background-repeat: repeat;
    }

All this works fine on my Mac box, but when viewing on a Windows system, I get this solid color over the image background. In the CE4 AutoIndex settings, there is a background color stipulated but I taught that the CSS script would supersede this setting. And there is no way, as far as I can tell, to NOT have a color in the PAGE BODY/page background in TTG CE4 AutoIndex.
What am I doing wrong?

I posted screen shots of both systems displaying "different" home pages : http://pideja.ca/images.jpg

Last edited by pideja (2015-04-07 21:28:21)

rod barbee · 2015-04-07 21:34:29

Make sure that Site Info > Page Container: Background-color is unchecked

Using the inspector, I can see that there is a background color being applied. This is in the css and shouldn't have anything to do with the OS.

you also have background colors set for navigation background and navigation item background

I don't have a Mac but I do have an iPad, and your image doesn't show through on that. So double check the color for Page Container.

pideja · 2015-04-08 00:30:28

I'm sorry, but I can't find where to get this setting right. Furthermore, fiddling around with Lib/CSS/style-common.css I now have that solid color ALSO on the Mac!
Thinking that this file covered all pages (there is the word "common" in the name) I saw:

/* Typography
======================================== */

/* Normalize font-size for device-pixel-ratio */
html {
    background-color: #E2D7B5;
 
    font-size: 14px;
    min-height: 100%;
    }

" background-color: #E2D7B5 " witch is exactly that solid color. I removed that color code and...low and behold, I saw the solid color appear under that moose name-plate and the background (under that ripped paper image) became...white. So, I learned something: the background is under everything.
So, I put that color code back. The background, the lowest level's color was restored. Great. But now, I have that solid color under the moose name-plate!
I am at a loss here.

Last edited by pideja (2015-04-08 00:33:52)

rod barbee · 2015-04-08 01:04:37

What do you have set in Site Info > Page Container: Background-color for this autoindex page? The Background-color box should be unchecked, But it sure looks like you've got a background color set there.

the background color from the code you show above comes from Site Info > Page Body: Page Background and acts as a backup in case the background image can't be shown. It shouldn't be removed.

pideja · 2015-04-08 23:39:17

No background color is checked. The only one is that Page Body / Page Background that has that color, but as you stated, it should be there as a backup and the CSS script should supersede it. But, for some reason I still stuck with that solid color.
I double checked the Server path to phplugins and it's ok.
However, this might be of concern : it's the phplugins file within the phplugins folder.

function ttg_head_end( $style, $path ) { 
    echo '
    <link rel="stylesheet" href="http://lucnadeau.ca/phplugins/css/custom.css" />
    ';
    // IMPLEMENT STACKBLUR.JS TO BLUR PAGE BACKGROUND, USING THE "PAGE IMAGE" DEFINED IN LR AS BACKGROUND
function ttg_body_bottom( $style, $path ) { 
    echo '
<script src="./phplugins/js/simple-js-inheritance.js" type="text/javascript"></script>
<script src="./phplugins/js/stackblur.min.js" type="text/javascript"></script>
<script type="text/javascript">

if (
    (navigator.userAgent.match(/Android/i)) ||
    (navigator.userAgent.match(/Blackberry/i)) ||
    (navigator.userAgent.match(/SymbianOS/i)) ||
    (navigator.userAgent.match(/iPhone/i)) ||
    (navigator.userAgent.match(/iPod/i)) ||
    (navigator.userAgent.match(/iPad/i))
    ) {} else {
    var blur = new Blur({ 
        el : document.querySelector("body"), 
        path : "photos/' . PAGEIMAGE . '", 
        radius : 2, 
        fullscreen : true 
    });
}
</script>
    ';
} // END
} // END

I think I may have tried something and I thaught it may be harmfull but after removing the code and checking the site I came to the conclusion that it has no effect either way.

What's strange is that within the site itself (as soon as you click on FRANÇAIS) the background is exactly how I want it. The offending page is an AutoIndex page. Should I have been better served by a PAGES template to do this function? It's only ment to steer people to french or english version of the site?

rod barbee · 2015-04-09 00:02:44

The only part of that code you posted that's showing up in the page code is the link that calls the stylesheet.

the javascript isn't showing up in the body bottom area.

This leads me to believe that the phplugins file you copied from above is not the one that's being applied.

Is this the server path you're using: /home/pidej435/public_html/lucnadeau.ca/phplugins

And the css associated with the page is definitely showing that there are background colors applied to the Page Container as well as the Navigation and the Footer.

So my only conclusion is that you're uploading your autoindex someplace other than the root of the site. Either that or your FTP program is set to not overwrite on upload.

pideja · 2015-04-09 01:01:14

You must be right...before receiving your answer, I copy/pasted the template from the AutoIndex to a CE4Pages template, did some minor tweaks to unrelated design points and swapted the intro page from the AutoIndex to the Pages template and voilà!

The phplugins file is cleaner. No Javascript. Looks good now.

I'll be testing it on various platforms before moving on.

There's bound to be other issues, like the thumbnails on the Galleries page that are too big....

Thanks again.

pideja · 2015-04-09 02:37:14

Just trying something...If I changed that nameplate overlay from an image set in the HOME page to a...Dynamic Masthead using CSS?
How can I get whatever script I put in the CSS file concerning the masthead, to affect ONLY the " welcome " page? That's the one where there is the French and English navigation. I figure if I can get the name plate image (the caribou + name of the artist) to sit in the center of the page as a dynamic masthead, I could get the size of the image to adjust for the different platforms.

I am making any sense? Is this possible?

rod barbee · 2015-04-09 05:13:10

With Pages, each of the individual pages has a body ID that you can target with CSS. But the rest of the plug-ins don't have that.

So what you could do for your Home autoindex page is use a separate css file for just that home page. I think this would also require that your home page uses a separate phplugins file.

This could be done a number of ways. If the rest of your site is already using your main phplugins/phplugins.php file, then perhaps create a phplugins2/phplugins.php file and put the server path to that file in the home autoindex page.
your css file would then be in /phplugins2/css/custom.css and you would need to modify the path to it in the phplugins file.

OR

if you want to get fancy, you could feed a different custom css file to your home autoindex page using conditional statements in the master phplugins.php file using something that Graceson and I came up with.
Look here: http://community.theturninggate.net/top … -solution/
scroll to the bottom for the code to feed custom css to a page with a specific url

pideja · 2015-04-09 20:04:30

Well, I at least have a version of the page that's OK for now.
One other question: why is it that on my monitor (21,5 in. 1080p) and on other monitors, all the same theoretical size, PC and Mac, the page displays...10% bigger!
I have to adjust the display size on the monitor to 90% in order to view the whole page as I designed it.

How doe on control display sizes to take into account different screens?

Last edited by pideja (2015-04-09 20:08:18)

rod barbee · 2015-04-09 22:17:33

I'm not really sure which part of the page you're referring to.

the page body takes up the whole width of the browser. The Page Container is set to 1140px. So if you see any difference in actual size I'm guessing it has to be the monitor resolution.

Since this is getting off the original topic, can you post it under it's own subject. That way, someone who may know more about this will be more likely to see it.

pideja · 2015-04-16 00:49:42

I wrote the phplugins according to the suggestion received earlier about different CSS files for different sections of my site. Like so :

function ttg_head_end( $style, $path ) {
  if ($_SERVER[SERVER_NAME] == 'lucnadeau.ca') {
 echo '
 <link rel="stylesheet" href="/phplugins/css/custom.css" />
    ';
 } else if ($_SERVER[SERVER_NAME] == 'lucnadeau.ca/fr') {
 echo '
 <link rel="stylesheet" href="http://lucnadeau.ca/fr/phplugins/css/fr.css" />
    ';
 } else {
 echo '
 <link rel="stylesheet" href="http://lucnadeau.ca/en/phplugins/css/en.css" />
';
 }
}    
// END

All three CSS files are identical. But they are named differently for each section. But, although the desired effect does occur, it looks like only the principal CSS file is relevant. Both others don't show up. I'm ok with the way the background page shows up. So, should I just delete the extra PHPLUGINS and CSS folders?

rod barbee · 2015-04-16 03:02:31

I think the issue is that all three have the same server name. They're just in different sub-folders of the same domain. If they were in different sub-domains then it would probably work. (I should have noticed that earlier, but I'm still learning all this stuff....)
One solution is to do what Graceson did and have separate sub-domains for each site. In your case it would be:
fr.lucnadeau.ca and en.lucnadeau.ca

I'm not positive, but since the folders already exist on the server you may be able to turn them into sub-domains without needing to re-upload the content. I'm guessing you'll get a warning message if this is not the case.
If you do this, you'll need to change your navigation to reflect the sub-domains rather than sub-folders

But if all three "sites" need the same css, then I wouldn't bother.

Daniel Leu · 2015-04-16 03:59:16

I agree with Rod that there is no benefit of using separate css files if they are identical.

I would use the $path variable to check for the location of the pages. First do a simple echo '$path' to get the server path. Then use everything up to and including .../fr/ for the selector.

Something like this:

    if (strpos($path, '/xx/xx/fr/') !== false){
        echo '<link rel="stylesheet" href="http://lucnadeau.ca/fr/phplugins/css/fr.css" />';
    } elseif (strpos($path, '/xx/xx/en/') !== false){
        echo '<link rel="stylesheet" href="http://lucnadeau.ca/fr/phplugins/css/en.css" />';    
    } else {
        echo '<link rel="stylesheet" href="http://lucnadeau.ca/fr/phplugins/css/custom.css" />';    
    }

Community @ The Turning Gate

#1 2015-04-07 21:18:12

Background image not showing on Windows systems

#2 2015-04-07 21:34:29

Re: Background image not showing on Windows systems

#3 2015-04-08 00:30:28

Re: Background image not showing on Windows systems

#4 2015-04-08 01:04:37

Re: Background image not showing on Windows systems

#5 2015-04-08 23:39:17

Re: Background image not showing on Windows systems

#6 2015-04-09 00:02:44

Re: Background image not showing on Windows systems

#7 2015-04-09 01:01:14

Re: Background image not showing on Windows systems

#8 2015-04-09 02:37:14

Re: Background image not showing on Windows systems

#9 2015-04-09 05:13:10

Re: Background image not showing on Windows systems

#10 2015-04-09 20:04:30

Re: Background image not showing on Windows systems

#11 2015-04-09 22:17:33

Re: Background image not showing on Windows systems

#12 2015-04-16 00:49:42

Re: Background image not showing on Windows systems

#13 2015-04-16 03:02:31

Re: Background image not showing on Windows systems

#14 2015-04-16 03:59:16

Re: Background image not showing on Windows systems

Board footer