Background image not continuous
First image is background image I created. The second is how it came out . Notice the stray slanted E. Below is the vierw of the selected source:
<html><head><title>Preview Post</title> <meta name="author" content="Howard_Cary_Morris@hotmail.com"> <meta name="keywords" content="Pro Trump"> <meta name="dcterms.created" content="2017-4-13"> <meta name="dcterms.modified" content="2017-5-20"> <meta property="og:title" content="#AmericaFreedomPressAlliance"> <meta property="og:url" content="http://americasfreedompressalliance.us/"> <meta property="og:type" content="website"> <meta property="og:description" content="Preview Post"> <meta property="og:image" content="http://americasfreedompressalliance.us/EAlli.png"> <meta property="fb:app_id" content="1298507713601357"> <script> function Start() { var PIC='',FONT='',SIZE='',TEXT='', TINT='' t = location.search.substr(1) // alert(t) t=t.replace(/\+/g, '%20') // alert(t) t = decodeURIComponent(t) u = t.split('&') for (i=0; i<u.length;i++) { v = u[i].indexOf('=') x = u[i].substr(0,v) y = u[i].substr(v+1) switch (x) { case 'PIC': PIC=y; break case 'FONT': FONT=y; break case 'SIZE': SIZE=y; break case 'TEXT': TEXT=y; break case 'TINT': TINT=y; break } } // alert("PIC="+PIC+"\nFONT="+FONT+"\nSIZE="+SIZE+"\nTEXT+"+TEXT) O = document.getElementById("I1") if (FONT!='') O.style.fontFamily=FONT if (SIZE!='') O.style.fontSize=SIZE if (TINT!='') O.style.color=TINT O = document.getElementById("I2") if (TEXT!='') O.innerHTML=TEXT if (TINT!='') O.style.color=TINT if (PIC!='') document.getElementById("I3").src=PIC} </script> <style> .td1 {background-size:100% 100%; width:4in;background-image: url('Allimark.png'); } table {text-align:center; vertical_align:middle; margin:auto; background-color:#1f1f1f;} </style> </head><body onload="Start()"> <table id="I1" style="font-family: Algerian; font-size: 300%; color: green;"> <tbody><tr> <td class="td1"> <table class="td1" style="height:100%"> <tbody><tr> <td id="I2" style="color: green; height: 100%;">Mommy<br>Look at me Now!</td></tr> <tr> <td><img src="EAlli.png" style="max-height:.75in"></td></tr> <tr> <td style="background-color:blue; color:red; font-size:12pt; font-family:Courier New"> #AmericaFreedomPressAlliance</td></tr></tbody></table> </td><td><img id="I3" alt="Picture missing" src="http://4umi.com/image/book/swift/gulliver-winter-lilliput1.jpg"></td></tr> </tbody></table> </body></html>
Modified by cor-el
Chosen solution
Finally found workaround. At 'onload' time I was doing things that was making the size of the background change. By waiting until all the changes were done and then setting the element with .style.backgroundImage = "url(...)" the background came out right. I presume there might have been an overlay of the backgrounds as the element size changed. I assume this is a FF problem since the manual does not state I must do it this way. PS. IE and Edge had a similar error. I don't remember if I tried other browsers.
Read this answer in context 👍 2All Replies (3)
What issue does this have to do with FF as you have not explained any problems you are having to a degree of understanding the issue that is caused by FF.
Have you checked your html code and are you using the right version of documents as code does not look that great for HTML ver 5.
Suggest empty your cache and try loading the page.
The info you supplied as far as can tell is from the main index page which is not displaying your picture at all. Check your picure in IE/Seamonkey/Edge and run your code for the each page on the site through W3C (web standards) https://validator.w3.org/ Once have found out it is not a coding error or is coding error Please come back and comment and close this off if solved.
Chosen Solution
Finally found workaround. At 'onload' time I was doing things that was making the size of the background change. By waiting until all the changes were done and then setting the element with .style.backgroundImage = "url(...)" the background came out right. I presume there might have been an overlay of the backgrounds as the element size changed. I assume this is a FF problem since the manual does not state I must do it this way. PS. IE and Edge had a similar error. I don't remember if I tried other browsers.
I do suggest you run your code through W3C Validator Your index page has 8 errors though most can be fixed when figure out 1 or 2 of the issues. Since is the web authority on coding, only a suggestion if want great code and no browser issues. https://validator.w3.org/