Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Aiheen aloitti: willemjan - elokuu 19, 2011, 09:24:29 AP

Otsikko: Full page body background
Kirjoitti: willemjan - elokuu 19, 2011, 09:24:29 AP
I am putting together an new theme based on curve, and I ran into an little problem. I want to put an background image in the body tag that is page filling. This is possible with CSS3 because of the background-size tag:

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;


Now to add compatibility for IE8, I need to put this code in index.template.php:

<!--[if lte IE 8]>
<style type="text/css">
body {
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg', sizingMethod='scale')";
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg', sizingMethod='scale');
}
</style>
<![endif]-->


The problem is that this code is based on an HTML page, and not an PHP page. I tried to put it in an echo, but that gave me an parsing error. Who has an clue on how to fix this?
Otsikko: Re: Full page body background
Kirjoitti: IchBin™ - elokuu 19, 2011, 02:56:55 IP
When you put it in an echo using single quotes as the echo's syntax, you'll need to escape any other single quotes in the text so that they are parsed (or not parsed in this case) properly.

echo '<!--[if lte IE 8]>
<style type="text/css">
body {
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'linkToImage.jpg\', sizingMethod=\'scale\')";
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'linkToImage.jpg\', sizingMethod=\'scale\');
}
</style>
<![endif]-->';
Otsikko: Re: Full page body background
Kirjoitti: willemjan - elokuu 19, 2011, 05:08:53 IP
That worked like an charm! Thanks a lot!