[SOLVED] Problems with Scalable Background Image in Firefox Only

Alan_OldStudent · #26 Jan 22, 2015, 05:12 PM

Quote:

Originally Posted by juggledad

Alan could you do an export of your settings and attach them to a reply (use the paper clip icon)

I got the same results in both cases on my site - I did have to make the body style have 'background: transparent' and set the layout width to 80%.

I'd like to see what you have.

I sent it in a PM

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra

juggledad · #27 Jan 22, 2015, 07:55 PM

Did you by any chance put comments arround the code when you put it in the CSS Inserts? If you had used

HTML Code:

<!--Responsive BG image-->

in teh CSS Insert code it ignores anything after it.

without the comments the two example you show work fine for me. Oh Well, must be one of those things.

Alan_OldStudent · #28 Jan 22, 2015, 09:31 PM

Quote:

Originally Posted by juggledad

Did you by any chance put comments arround the code when you put it in the CSS Inserts? If you had used

HTML Code:

<!--Responsive BG image-->

in teh CSS Insert code it ignores anything after it.

without the comments the two example you show work fine for me. Oh Well, must be one of those things.

Hi JD,

I went to "ATO>Export/Import Settings>Export Atahualpa settings as file" and pushed the button that said "Export & Download Atahualpa Settings File". The resulting file dump has no line feeds. That makes it hard to read for mere mortals like you and me.

I'll send you another PM with cut and paste clearly showing what I have. As you can see, I have several things in my code, all commented, and all seeming to work.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra

juggledad · #29 Jan 23, 2015, 05:10 AM

Quote:

I went to "ATO>Export/Import Settings>Export Atahualpa settings as file" and pushed the button that said "Export & Download Atahualpa Settings File". The resulting file dump has no line feeds

it's not supose to have line feeds,. It's in the JSON format

There is a major reason that you shouldn't add

HTML Code:

<!--Responsive BG image-->
<html style="[
      background: url(http://MySite/wp-content/.../MyBackgroundImage.gif) no-repeat fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
";>
<!--Shamelessly stolen from a website I lost track of, modified with Juggledad's suggestion-->

to the 'HTML Inserts: Body Top' option: You now have a page with two <html> sections - this may not validate and may cause a problem in a browser (moble or desktop) at some point.

That said, what you have done with that code is applied styling to an element - you can do the same by moving the element's 'style=...' into a CSS style sheet - which is what happens when you put it into the CSS Inserts. Now there is a slight change in the syntax, but not much.

If, when you experimented with adding the code to the CSS Inserts option you used this

HTML Code:

<!--Juggledad's suggestion-->
html {
      background: url(http://15nowtacoma.info/wp-content/ata-images/ata-background/background_Logo_c_fromJD.jpg) no-repeat fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
<!--End of Juggledad's suggestion-->

it would not work because the '' is not a valid comment in CSS.

Quote:

A CSS comment starts with /* and ends with */. Comments can also span multiple lines

So that line would have casued a syntax error in the CSS processor casuing it to ignore the remaining CSS (Depending on the browser since they handle things differently)

Sooooo, try again
1) remove the code from the 'HTML Inserts: Body Top' option
2) add the following to the 'CSS Inserts' option

HTML Code:

/* Juggledad's suggestion */
html {
      background: url(http://15nowtacoma.info/wp-content/ata-images/ata-background/background_Logo_c_fromJD.jpg) no-repeat fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
/* End of Juggledad's suggestion */

3) test it and see if it works.

Alan_OldStudent · #30 Jan 23, 2015, 04:30 PM

Quote:

Originally Posted by juggledad

.....
............
...........Sooooo, try again
1) remove the code from the 'HTML Inserts: Body Top' option
2) add the following to the 'CSS Inserts' option

HTML Code:

/* Juggledad's suggestion */
html {
      background: url(http://15nowtacoma.info/wp-content/ata-images/ata-background/background_Logo_c_fromJD.jpg) no-repeat fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
/* End of Juggledad's suggestion */

3) test it and see if it works.

I tried it again, and now it works!

I really appreciate your hanging in there and helping me resolve this frustrating problem.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra