X
Tap here to go to the mobile version of the site.

Support Forum

Background image not continuous

Posted

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>
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: <pre><nowiki><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></nowiki></pre>
Attached screenshots

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 2

Additional System Details

Installed Plug-ins

  • Shockwave Flash 25.0 r0

Application

  • Firefox 53.0.3
  • User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0
  • Support URL: https://support.mozilla.org/1/firefox/53.0.3/WINNT/en-US/

Extensions

  • adaware ad block 1.5.1.0 (AdBlockerLavaSoftFF@lavasoft.com)
  • Follow-on Search Telemetry 0.8.0 (followonsearch@mozilla.com)
  • JavaScript Toggle On and Off 0.1.4 (jid1-EbhJmw1yu6Juy@jetpack)
  • Shield Recipe Client 1.0.0 (shield-recipe-client@mozilla.org)
  • Application Update Service Helper 2.0 (aushelper@mozilla.org) (Inactive)
  • Avast Online Security 12.0.222 (wrc@avast.com) (Inactive)
  • Avast SafePrice 12.0.222 (sp@avast.com) (Inactive)
  • HP Smart Web Printing 4.5 (smartwebprinting@hp.com) (Inactive)
  • Multi-process staged rollout 1.14 (e10srollout@mozilla.org) (Inactive)
  • Pocket 1.0.5 (firefox@getpocket.com) (Inactive)
  • Web Compat 1.0 (webcompat@mozilla.org) (Inactive)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: Intel(R) G45/G43 Express Chipset (Microsoft Corporation - WDDM 1.1)
  • adapterDescription2:
  • adapterDeviceID: 0x2e22
  • adapterDeviceID2:
  • adapterDrivers: igdumd64 igd10umd64 igdumd32 igd10umd32
  • adapterDrivers2:
  • adapterRAM: Unknown
  • adapterRAM2:
  • adapterSubsysID: 02511025
  • adapterSubsysID2:
  • adapterVendorID: 0x8086
  • adapterVendorID2:
  • crashGuards: []
  • currentAudioBackend: wasapi
  • direct2DEnabled: False
  • direct2DEnabledMessage: [u'blockedGfxCard']
  • directWriteEnabled: True
  • directWriteVersion: 10.0.14393.1358
  • driverDate: 3-11-2013
  • driverDate2:
  • driverVersion: 8.15.10.2702
  • driverVersion2:
  • featureLog: {u'fallbacks': [], u'features': [{u'status': u'available', u'description': u'Compositing', u'name': u'HW_COMPOSITING', u'log': [{u'status': u'available', u'type': u'default'}]}, {u'status': u'available', u'description': u'Direct3D11 Compositing', u'name': u'D3D11_COMPOSITING', u'log': [{u'status': u'available', u'type': u'default'}]}, {u'status': u'disabled', u'description': u'Direct3D9 Compositing', u'name': u'D3D9_COMPOSITING', u'log': [{u'status': u'disabled', u'message': u'Disabled by default', u'type': u'default'}]}, {u'status': u'blacklisted', u'description': u'Direct2D', u'name': u'DIRECT2D', u'log': [{u'status': u'available', u'type': u'default'}, {u'status': u'blacklisted', u'message': u'#BLOCKLIST_FEATURE_FAILURE_1180379', u'type': u'env'}]}, {u'status': u'blacklisted', u'description': u'Direct3D11 hardware ANGLE', u'name': u'D3D11_HW_ANGLE', u'log': [{u'status': u'available', u'type': u'default'}, {u'status': u'blacklisted', u'message': u'#BLOCKLIST_FEATURE_FAILURE_BUG_1153381', u'type': u'env'}]}, {u'status': u'available', u'description': u'GPU Process', u'name': u'GPU_PROCESS', u'log': [{u'status': u'available', u'type': u'default'}]}]}
  • info: {u'AzureCanvasAccelerated': 0, u'ApzWheelInput': 1, u'AzureContentBackend (UI Process)': u'skia', u'AzureCanvasBackend (UI Process)': u'skia', u'AzureFallbackCanvasBackend (UI Process)': u'cairo'}
  • isGPU2Active: False
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • webgl2Renderer: WebGL creation failed: * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Error during ANGLE OpenGL init. * Exhausted GL driver caps.
  • webglRenderer: Google Inc. -- ANGLE (Intel(R) G45/G43 Express Chipset (Microsoft Corporation - WDDM 1.1) Direct3D9Ex vs_3_0 ps_3_0)
  • windowLayerManagerRemote: True
  • windowLayerManagerType: Direct3D 11

Modified Preferences

Misc

  • User JS: Yes
  • Accessibility: No
Shadow110 1072 solutions 14836 answers

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.

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.

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.
Shadow110 1072 solutions 14836 answers

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/

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/