Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Background image not continuous

  • 3 replies
  • 3 have this problem
  • 19 views
  • Last reply by Shadow110

more options

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

All Replies (3)

more options

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.

more options

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.

more options

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/