Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] Problems with Scalable Background Image in Firefox Only


  #1  
Old Jan 18, 2015, 03:28 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
The website I am having a problem with is here: http://15nowtacoma.info/

About 3 weeks ago, I followed the directions in this thread and was quite happy with the result.

However, over the past few days, only the very top of the background image displays when using Firefox. This problem does not seem to happen with IE or Chrome.
  • I triple-checked the coding in “ATO->Body, Text & Links->Body Style” and made sure there was no “background statement.
  • I went to “ATO->Add HTML/CSS Inserts->HTML Inserts: Body Top and added in this: “<img src="http://15nowtacoma.info/wp-content/ata-images/ata-background/background-logo.png" id="bg" />” I checked the URL to the graphic and it works, shows up well in FF
  • I went to ATO->Add HTML/CSS Inserts->CSS Inserts and added this code:
HTML Code:
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#wrapper {
position:relative;
z-index:1;
}
Can anyone give me some insight as to what the problem is?

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #2  
Old Jan 18, 2015, 08:11 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
If it was working, what other changes did you make?
Add any new plugins or update anything?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jan 18, 2015, 10:08 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Hi JD,

You asked me the same question I just asked myself.

I had added a new post, and it had a new graphic. This is a link to the post.

The whole problem seems bizarre, as it is intermittent and only affects FF. Even after adding that post, the site displays okay on some occasions.

I flushed my FF cache, and that seems not to be a factor.

This problem does not manifest itself in IE, Chrome, or in Safari on my IPAD. It's the intermittent nature of the problem, seemingly unrelated to other factors which puzzles and worries me.

So I began to wonder if the size of the background image had something to do with it.

I reduced the background from being a PNG to being a GIF. The original PNG was 333,985 kb, and the GIF is 54,565, about 1/6 the size of the original. Of course, to my eye, the GIF has far less clarity and detail than does the PNG. But it's a background, and perhaps (as my mother used to say), "It'll never be noticed on the running horse."

The site seems to be working presently as I am writing this, but I don't know if this problem will suddenly spring up again.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #4  
Old Jan 19, 2015, 01:14 AM
Jam's Avatar
Jam
 
1,112 posts · Mar 2011
Perth, Western Australia
I only see background image fill top approx 250px (Firefox). Have you told the image to repeat, or is it much deeper than 250px?
Edit: In Chrome its repeating fine. Why dont you use just one copy of the logo and repeat it, then the image could be teeny weeny small vs the large image of many identical logos
__________________
May the learning curve never plateau... Thanks Larry for teaching me heaps.
My Themeframe built sites

Last edited by Jam; Jan 19, 2015 at 01:21 AM.
  #5  
Old Jan 19, 2015, 05:02 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Oh wow, I was on Firefox 34.0.5 and was going to ask you what version of Firefox you were using. I checked for updates and saw vrsion 35.0 was available so I updated and now I see the issue.

This is a bug in how FireFox is displaying things - I just refreshed the page and
the bg image was 1/4 the page
then 1/2 the page
then the full page.

I stripped everything out to show that it is not a theme or wordpress issue. Put this code in a text file with an extension of '.html' and open it in FireFox and refresh a couple times and the issue should show up.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>15 Now Tacoma</title>
<style type="text/css">

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#wrapper {
position:relative;
z-index:1;
}
</style>
	
</head>
<body>
<img src="http://15nowtacoma.info/wp-content/ata-images/ata-background/background-logo-c.gif" id="bg" />
<div id="wrapper">
</div>
</body>
</html>
You might want to report this to Mozilla...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Jan 19, 2015, 02:44 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Hi Jill,

Thanks for the suggestions and feedback.

You wrote:
Quote:
Originally Posted by Jam
I only see background image fill top approx 250px (Firefox). Have you told the image to repeat, or is it much deeper than 250px?
It's actually much deeper than that

Quote:
Originally Posted by Jam
Why dont you use just one copy of the logo and repeat it, then the image could be teeny weeny small vs the large image of many identical logos
I can create a tiny graphic based on the logo and just repeat it. Apparently, as JD discovered, a FF bug is probably responsible. I had wanted to use the big graphic because of the subtle color changes. Check out the big graphic by clicking here (goes to http://15nowtacoma.info/extras/background_display.html

I've just got to figure out how to do it. I'm not entirely clear. Can you give me a wee hint?
************
************
************

Hi JD,

You wrote:
Quote:
Originally Posted by juggledad
Oh wow, I was on Firefox 34.0.5 and was going to ask you what version of Firefox you were using. I checked for updates and saw vrsion 35.0 was available so I updated and now I see the issue.

This is a bug in how FireFox is displaying things - I just refreshed the page and
the bg image was 1/4 the page
then 1/2 the page
then the full page...
I ran the test you suggested and even put it online in preparation for reporting this bug to Mozilla. It seems to be okay now. I don't know why. That's the puzzling thing about this. The problem manifests intermittently.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #7  
Old Jan 19, 2015, 03:26 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
It must be something to due with the new release of FireFox and I can't help you further than that. If it's any consolation, there is a montezuma issue where with the new version of FireFox (35.0) the thumbnails are not showing till you hover over them.Again it works fine in other browsers.

I'll bet lots of people start seeing odd things and there will be a new version of FireFox in a bit.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jan 20, 2015, 12:58 AM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Quote:
Originally Posted by juggledad
It must be something to due with the new release of FireFox and I can't help you further than that. If it's any consolation, there is a montezuma issue where with the new version of FireFox (35.0) the thumbnails are not showing till you hover over them.Again it works fine in other browsers.

I'll bet lots of people start seeing odd things and there will be a new version of FireFox in a bit.
Hi JD,

I went to the Mozilla Bugzilla. What a rabbit warren! I couldn't make heads or tails out of how to report a bug. Mozilla doesn't make their complaint process overly transparent, for some reason.

So I went to the forum, which I haven't visited for years, because it seemed to be rather unhelpful some years ago when I posted there.

I posted my experience and just received an answer. It was rather bemusing. It reminds me of that old saying, "Denial is not a river in Egypt." Check it out by clicking here.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #9  
Old Jan 20, 2015, 02:29 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I'd go post the short bit of code I gave you.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Jan 20, 2015, 08:04 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Quote:
Originally Posted by juggledad
I'd go post the short bit of code I gave you.
Hi JD,

I went and did that. I got a couple of responses. One responder suggested I use "background-image" instead of an image. Check out the exchange by clicking here.

I'm wondering, is there a way of having a scalable background using "background-image"? I played around with it a bit and am afraid I don't know enough about CSS to know how to do it.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #11  
Old Jan 20, 2015, 09:37 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Hey JD,

I did a little test on my locally-installed copy of my website, and it seems to be working. I wanted to run this by you and see what you think:
  1. I went to "ATO->Add HTML/CSS Inserts->HTML Inserts" and took out this:
    Code:
    <img src="http://15nowtacoma.info/wp-content/ata-images/ata-background/background-logo-c.gif" id="bg" />
  2. I then went to "ATO->Add HTML/CSS Inserts->CSS Inserts" and removed this:
    Code:
    img#bg {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    }
    
    #wrapper {
    position:relative;
    z-index:1;
    }
  3. I then went to "ATO>addHTML/CSS/Inserts>HTML Inserts: Body Top" and added this:
    Code:
    <!--Responsive BG image (I hope)-->
    <html style="
          background: url(http://15nowtacoma.info/wp-content/ata-images/ata-background/background-logo-c.gif) no-repeat center center 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-->
Whaddaya think? Should I try it on my live site? And if I do, will you and others test it?

Regards,

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

Last edited by Alan_OldStudent; Jan 20, 2015 at 09:55 PM.
  #12  
Old Jan 21, 2015, 01:03 AM
stevinoz
 
61 posts · Sep 2012
Send a message via Skype™ to stevinoz
I'm watching this thread very interested to see the outcome so I'll help test
  #13  
Old Jan 21, 2015, 05:51 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
There is always more than one way. If it works, go for it. I'd put it in the CSS Inserts with
HTML Code:
html {
      background:  url([url]http://15nowtacoma.info/wp-content/ata-images/ata-background/background-logo-c.gif[/url]) no-repeat  fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-position: left top; 
}
the background-position will get you the gradiant on the left.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jan 21, 2015 at 06:00 AM.
  #14  
Old Jan 21, 2015, 03:37 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Quote:
Originally Posted by juggledad
There is always more than one way. If it works, go for it. I'd put it in the CSS Inserts with
HTML Code:
html {
      background:  url([url]http://15nowtacoma.info/wp-content/ata-images/ata-background/background-logo-c.gif[/url]) no-repeat  fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-position: left top; 
}
the background-position will get you the gradiant on the left.
Hi JD,

Your code did not work. So I used a modification of my code. I think it works, but I'm not sure until I hear back from others. So if you and readers such as JAM and Stevinoz could see if the site displays properly on your browsers, especially FireFox, I'd be grateful. The site, once again, is here: http://15nowtacoma.info/

My modification was that I replaced the "no-repeat center center fixed" with "no-repeat fixed" (omitting "center center"). That ensures the gradient on the left always displays (I hope).

In order to work, this must be placed in "ATO>addHTML/CSS/Inserts>HTML Inserts: Body Top"


***************
For those of you who are following this thread and who want to adapt it, here is how I did it:
  1. Go to "ATO>addHTML/CSS/Inserts>HTML Inserts: Body Top"
  2. Insert this code (after modifying the path to your background image)
    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-->
My intent is that this code fills the entire background of the screen without distortion. If the aspect ratio of your image differs from the screen you're looking at, it shows as much of the image as possible, always ensuring that the upper left corner of the image is in the upper left corner of the screen.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #15  
Old Jan 21, 2015, 05:04 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
Your code did not work.
ummm well it was a test...yeah a test (I like that) not a typo...to see if you would catch the 'url([url]' which is clearly bad css.

looks fine for me - it's still a big image though 334K I changed it to a jpeg and reduced the quality to 30% and ended up with an image that is only 66K
Attached Thumbnails
Click image for larger version

Name:	background-logoc.jpg
Views:	1308
Size:	64.4 KB
ID:	2645  
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #16  
Old Jan 21, 2015, 07:08 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Hi JD,

You wrote:
Quote:
Originally Posted by juggledad
ummm well it was a test...yeah a test (I like that) not a typo...to see if you would catch the 'url([url]' which is clearly bad css. .....
Never mind. You've been a big help. This board is certainly more helpful and friendlier than the Mozilla board.

Quote:
Originally Posted by juggledad
looks fine for me - it's still a big image though 334K I changed it to a jpeg and reduced the quality to 30% and ended up with an image that is only 66K
Yeah, I know that PNG was too large. I substituted your JPG for it, and I appreciate it very much. The GIF I had tried for a while did not have the quality I wanted, but it worked marginally better with the FF bug. Your JPG looks about as good as the much bigger PNG, and I appreciate your having gone to the trouble.

If JAM or Stevinoz are still monitoring this thread, would you mind testing the site in FF and letting me know if it comes up okay? Once again, the URL is this: http://15nowtacoma.info/

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #17  
Old Jan 21, 2015, 07:18 PM
Jam's Avatar
Jam
 
1,112 posts · Mar 2011
Perth, Western Australia
Displaying correctly now in Firefox Alan.
I use a bit of code to make a background image scalable, will dig it out, BRB

The CSS I use in a Themeframe site is:

Code:
background-size: contain !important;
So if you tried something like:

Code:
.index {
background: url(http://www.redbackgraphics.com.au/images/15NOWTacomaStrip.jpg;
background-size: contain !important;
}
That will create a responsive full width background. As you are using ATA, you probably need to add the code to your body, not sure.

You only need an image 100% wide (existing width), but only needs to be one logo deep. Take a copy of image in code above (18kb).
__________________
May the learning curve never plateau... Thanks Larry for teaching me heaps.
My Themeframe built sites

Last edited by Jam; Jan 21, 2015 at 07:56 PM.
  #18  
Old Jan 21, 2015, 10:58 PM
stevinoz
 
61 posts · Sep 2012
Send a message via Skype™ to stevinoz
Looks fine to me on:
IE11, FF29.0.1, FF33.0.2, FF35.0, Chrome39.0.2, Chrome40.0.2
background was fixed and full window.
Good oportunity to update my browsers
  #19  
Old Jan 21, 2015, 11:22 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Quote:
Originally Posted by stevinoz
Looks fine to me on:
IE11, FF29.0.1, FF33.0.2, FF35.0, Chrome39.0.2, Chrome40.0.2
background was fixed and full window.
Good oportunity to update my browsers
Thanks Stevinoz,

I appreciate your checking this out.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #20  
Old Jan 21, 2015, 11:43 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Quote:
Originally Posted by Jam
Displaying correctly now in Firefox Alan.
I use a bit of code to make a background image scalable, will dig it out, BRB

The CSS I use in a Themeframe site is:

Code:
background-size: contain !important;
So if you tried something like:

Code:
.index {
background: url(http://www.redbackgraphics.com.au/images/15NOWTacomaStrip.jpg;
background-size: contain !important;
}
That will create a responsive full width background. As you are using ATA, you probably need to add the code to your body, not sure.

You only need an image 100% wide (existing width), but only needs to be one logo deep. Take a copy of image in code above (18kb).
Hi JAM,

I appreciate your going to the trouble of making that graphic and posting your suggestion. Unfortunately, I was unable to make your code as written work for me.

That motivated me to do a bit of experimenting and investigating. First of all, I wanted to know more about the difference between "background-size: cover" and "background-size: contain", and so I checked out this Mozilla Developer article.

Then I developed 2 mini HTML files to test the difference. You can check out how they display in your browser:
File with "Cover" attribute
Code:
<!DOCTYPE html>
<html lang="en">
<html style="
background: url(http://www.redbackgraphics.com.au/images/15NOWTacomaStrip.jpg) ;
background-size: cover;";>
</body>
</html>
File with "Contain" attribute
Code:
<!DOCTYPE html>
<html lang="en">
<html style="
background: url(http://www.redbackgraphics.com.au/images/15NOWTacomaStrip.jpg) ;
background-size: contain !important;";>
</body>
</html>
I thought the one with "cover" would be more acceptable had I decided to use your idea of having a graphic which is only 1 logo deep. At least made each row stretch entirely across the viewport. However, I did not like the way the gradient rendered on the left side compared to the code I am now using.

Maybe because I am not that knowledgeable about CSS, I couldn't make "contain" work. The graphic was so small and shrunken that the impact of the logo was lost entirely.

Again, I appreciate the time and energy you have given in helping me with this topic and in some other areas of this forum as well.

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #21  
Old Jan 22, 2015, 01:14 AM
Jam's Avatar
Jam
 
1,112 posts · Mar 2011
Perth, Western Australia
Ah. Your contain example didn't give the same result my contain test did. I was getting similar/same as your cover example/result.
Its all good, testing and playing with code, always gets a result. The more you play the more you learn. Glad you have it sorted.
__________________
May the learning curve never plateau... Thanks Larry for teaching me heaps.
My Themeframe built sites
  #22  
Old Jan 22, 2015, 03:44 AM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Quote:
Originally Posted by Jam
Ah. Your contain example didn't give the same result my contain test did. I was getting similar/same as your cover example/result.
Its all good, testing and playing with code, always gets a result. The more you play the more you learn. Glad you have it sorted.
And thank you so much for your help and encouragement. You're a peach!

Regards,

Alan OldStudent
The unexamined life is not worth living—Socrates
Gracias a la vida, que me ha dado tanto—Violeta Parra
  #23  
Old Jan 22, 2015, 04:04 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Alan, I'd recommend you put your styling in the 'CSS Inserts' option instead of making it an in stream styling.

so take this out of the 'HTML Inserts: Body Top'
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-->
and put this in the 'CSS Inserts'
HTML Code:
html {
      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;
}
Easier to maintain if all your CSS is in one place and less chance to mess yourself up if you decide to chance it in teh future.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #24  
Old Jan 22, 2015, 01:51 PM
Alan_OldStudent's Avatar
Alan_OldStudent
 
46 posts · Oct 2013
Northwest United States
Quote:
Originally Posted by juggledad
Alan, I'd recommend you put your styling in the 'CSS Inserts' option instead of making it an in stream styling.

so take this out of the 'HTML Inserts: Body Top'
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-->
and put this in the 'CSS Inserts'
HTML Code:
html {
      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;
}
Easier to maintain if all your CSS is in one place and less chance to mess yourself up if you decide to chance it in teh future.
Hi JD,

I know what you mean about difficulty maintaining stuff and appreciate the caution. The caution is appropriate, especially for someone like me who's knowledge of CSS is a bit spotty. Here's what I do to try to prevent hopelessly confusing my ancient brain cells.
  • I keep careful notes about what I do.
  • I keep backups of my sites, and I do weekly backups (I maintain 3 sites right now)
  • I do most of my experimenting in a locally-installed WAMP, and I test my backups by installing them on the WAMP.
  • I do most of my experiments on the WAMP'd version of my site before I go live.
  • I carefully COMMENT my code.


I've been using the JPG that you made of my background image (which I named this in your honor: background_Logo_c_fromJD.jpg), and so I went to my WAMP and used this massaged bit of code, which is your suggestion:
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-->
As it is written, your code doesn't seem to work for me.

I put your code in "ATO>Add HTML/CSS Inserts>CSS Inserts," and your code didn't work there. I noticed the documentation in that section says: "Add CSS code here that you want to append to your theme's CSS file." I thought a bit about that, because my code didn't work there either.

So I tried to add your code to the "ATO>Add HTML/CSS Inserts>HTML Inserts: Body Top." Once again, the code did not work.

However, this code did work:
Code:
<!--Responsive BG image (I hope)-->
<html style="
      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;
";>
<!--Shamelessly stolen from a website I lost track of-->
But it only works when I put it in "ATO>Add HTML/CSS Inserts>HTML Inserts: Body Top"

Right now, the site is working (I think), and so I am probably going to keep it as is unless it gets broken again.

Regards,

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

Last edited by Alan_OldStudent; Jan 22, 2015 at 02:20 PM.
  #25  
Old Jan 22, 2015, 03:43 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
I need a scalable header image, but how? tobi81 Header configuration & styling 1 Mar 19, 2012 10:00 AM
HOWTO: Make a scalable background image juggledad Header 15 Mar 16, 2012 01:28 PM
ThemeFrame and scalable background images smcurtis ThemeFrame Presales 3 Jun 11, 2011 12:06 PM
Can I make my Background Image Scalable jimzook Atahualpa 3 Wordpress theme 1 Dec 16, 2010 12:50 PM
Identifying background image with Firefox. Help ontrackdesignz Atahualpa 3 Wordpress theme 1 Dec 10, 2010 11:24 AM


All times are GMT -6. The time now is 07:50 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.