Why dosent the picture show up on my mobile phone (iphone 5) or on my ipad ?

Hi!

Have this webpage:

<?php
error_reporting(E_ALL);
require_once('RAY_EE_config.php');
$table1 = 'Spm_Lokasjon';
// ACCESS TO THIS PAGE IS TESTED BUT NOT CONTROLLED
if ($uid = access_control(TRUE))
{
   $brukerID = brukerident('xxx');
   $navn = '';
   $navn = $_GET['Navn'];
   $lokk = $_GET['lokk'];
   $svar = $_GET['Svar'];   
   $teksten = $_GET['Teksten'];
   $kundeid = kundeid();
   
   if ($svar=='reg')   
   {
      $test=oppdaterlokasjonen($lokk,$kundeid);
   }
    if ($svar=='Videre')   
   {
	   $stat_trans = transaksjoner('TEST123',10,'DETTE ER EN TEST',$lokk,'Nei',$teksten,'','2013-05-05',$kundeid,$brukerID);
	   $sjekkomfleresp = sjekk_om_flere_sposmal($lokasjon,$kundeid);
	   if ($sjekkomfleresp=='0')
	   {
	      $sjekkst = oppdaterkontroller_status($lokk,$kundeid,$brukerID,0);
	      $lokk = hent_neste_kontroller($kundeid,$brukerID);
		  if ($lokk==0)
		  {
		    $oppdst=oppdaterkontroller_status($lokk,$kundeid,$brukerID,1); 
			oppdater_spmorsmal($lokk,$kundeid,1);
		    header("location: http://www.softkey.no/webtest/hovedside.php");
	      }
		  else
		  {
		     header("location: http://www.softkey.no/webtest/hovedside.php");
		  }
		  exit;
	   }
   }   
}
else
{
        header("location: login.php");
	    exit;
}
?>
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Test system</title>

</head>

<body>
<link rel="stylesheet" href="default.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<br>
<table summary="Services, or Links box template" class="servicesT" cellspacing="1" border="0">
<tr><td colspan="2" class="servHd" height="40"><?php echo $navn;?></td></tr>
<br>

<tr>
<td class="servBodL" width="100%">
	<textarea id="tekstsvar" name="Teksten" width="100%" rows="10" style="background-image: url(images/penn.png"></textarea>
</td>
</tr>
<br>
<tr>
<td class="servBodL" width="100%">
<input id="file-input" type="file" name="image" accept="image/*" capture="camera" />
</td>
</tr>
<br><br>
</table>
<br><br><br><br>
<table width="100%">
<tr>

<fieldset id="actions" width="100%">

<td width="50%"><a href="http://www.softkey.no/webtest/neisvar.php?lokk=<?php echo $lokk; ?>&Kunde=<?php echo $kundeid; ?>&Navn=<?php echo $navn; ?>&Svar=Videre"><input type="submit" id="JAKNAPP" value="Videre"></a></td>
<td width="50%"><a href="http://www.softkey.no/webtest/hovedside.php"><input type="submit" id="NEIKNAPP" value="Avslutt"></a></td>
</fieldset>
</tr>
</table>
</body>
</html>

Open in new window



******************CSS**********************

html, body
{
    height: 100%;
}

body
{
    font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;    
    margin: 0;
    background-color: #614912; 
	width:100%;
}

/*--------------------*/
a:link    {
  /* Applies to all unvisited links */
  text-decoration:  none;
  } 
#login
{
    background-color: #614912;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    position: absolute;
	width: 100%;
    top: 50%;
    left: 50%;
    z-index: 0;
    -webkit-border-radius:0px;
	webkit-appearance: none;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-appearance: none;
}

#GULKN
{
    background-color: #e4ab15;
	font: 30px Arial, Helvetica;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    max-width: 50px;
	color: #ffffff;
	cursor: pointer;
	position: left;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-appearance: none;
}

/*--------------------*/

h1
{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
}

h1:after, h1:before
{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px;   
}

h1:after
{ 
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);      
    right: 0;
}

h1:before
{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
}

h1:after2
{ 
    background: #614912;    
    right: 0;
}

h1:before2
{
    background: #614912;
    left: 0;
}

/*--------------------*/

fieldset
{
    border: 0;
    padding: 0;
    margin: 0;
}

/*--------------------*/

#inputs input
{
    padding-right: 5px;
    margin: 0 0 10px 0;
	font: 20px Arial;
	height: 45px;
	color:#ffffff; 
	background-color: #96825a;
	border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	width: 100%;
}

#uid
{
	height:20px;
	padding:10px 25px;
}

#pwd
{
    height:20px;
	 padding:10px 25px;
}
#username
{
background-repeat:no-repeat;
background-position:right; 
text-align:center;
background-origin:content-box;
}

#tekstsvar
{
background-repeat:no-repeat;
background-position:right; 
background-color: #d1c5b0;
text-align:center;
font: 20px Arial;
width:100%;
background-origin:content-box;
}

#password
{
background-repeat:no-repeat;
background-position:right; 
text-align:center;
background-origin:content-box;
}
#inputs input:focus
{
    background-color: #96825a;
    outline: none;
	width: 100%;
}

/*--------------------*/

#LOGIN
{		
    background-color: #e4ab15;
    float: center;
    height: 70px;
    width: 100%;
    cursor: pointer;
    font: 30px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    -webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-border-bottom-left-radius:0px;
	-webkit-appearance: none;
}

#JAKNAPP
{		
    background-color: #e4ab15;
    float: center;
    height: 55px;
    width: 100%;
    cursor: pointer;
    font: 30px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-appearance: none;
}

#NEIKNAPP
{		
    background-color: #880051;
    float: center;
    height: 55px;
    width: 100%;
    cursor: pointer;
    font: 30px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-appearance: none;
}

#LOGGUT
{		
    background-color: #d1c5b0;
    float: center;
    height: 55px;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    font: 30px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
	border-radius:10px;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
	-webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-appearance: none;
}

#submit2
{		
    background-color: #96825a;
    float: center;
    height: 40px;
    width: 100%;
	margin:0;
    cursor: pointer;
    font: 20px Arial, Helvetica;
	text-align:center;
    color: #ffffff;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    -webkit-border-radius:0px;
	border-radius:0px;
	-moz-border-radius:0px;
	-moz-box-shadow:0px;
	-webkit-box-shadow:0px;
	box-shadow:0px;
	-webkit-border-bottom-left-radius:0px;
	-webkit-appearance: none;
}

table.hoved
{
    background-color: #614912;
    border: none ! important;
    box-shadow: none ! important;
    outline: none ! important;
    margin: -150px 0 0 -230px;
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
	width: 100%;
}
table.servicesT
{ font-family: Verdana;
font-weight: normal;
font-size: 20px;
color: #404040;
background-color: #fafafa;
border: 0px #614912 solid;
border-collapse: collapse;
border-spacing: 0px;
margin-top: 0px;
width: 100%;
}


table.servicesT td.servHd
{ border-bottom: 1px solid #614912;
background-color: #96825a;
text-align: center;
font-family: Verdana;
font-size: 20px;
text-align: center;
color: #ffffff;
width: 100%;
}

table.servicesT td.header1
{ 
border-bottom: 1px solid #614912;
background-color: #614912;
font-family: Verdana;
font-size: 20px;
text-align: left;
color: #614912;
hight: 50px;
width: 100%;
}




table.servicesT td
{ border-bottom: 0px solid #614912;
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
color: #404040;
background-color: #d1c5b0;
text-align: center;
padding-left: 3px;
width: 100%;
}

able.servicesJN td
{ 
font-family: Verdana, sans-serif, Arial;
font-weight: normal;
font-size: 20px;
text-align: center;
color: #404040;
background-color: #ffffff;
text-align: center;
padding-left: 3px;
width: 100%;
}

table.TESTE td
{
  color: #ffffff;
}
.servBodL 
{ 
background-color: #d1c5b0;
border-left: 0px solid #614912; 
} 
.servBodL_medborder
{ 
background-color: #d1c5b0;
border-left: 0px solid #614912; 
border-bottom: 1px solid #ffffff;
} 

Open in new window



My problem is that this code:
<td class="servBodL" width="100%">
	<textarea id="tekstsvar" name="Teksten" width="100%" rows="10" style="background-image: url(images/penn.png"></textarea>
</td>

The picture is not shown on my mobile phone or ipad. But are shown on my PC using firefox.

What do i do to autosize this <textare , so the picture will be shown on my mobile or ipad ?

Open in new window

LVL 2
team2005Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Gabriel CliftonNet AdminCommented:
It doesn't look like TextArea honors the backgroundImage property. A workaround is to create a view with a background image and then add the TextArea to the view:
var textAreaWrap = Ti.UI.createView({
    backgroundImage:'/path/to/image.png'
});
var myTextArea = Ti.UI.createTextArea({
    background:'transparent'
});
textAreaWrap.add(myTextArea);
You'll have to finesse the dimensions of the TextArea so it fits inside the view, and potentially turn off any default styles on the TextArea.
0
team2005Author Commented:
Hi!

Can you please show me how to use the view inside my code ?
0
Gabriel CliftonNet AdminCommented:
var textAreaWrap = Ti.UI.createView({
    backgroundImage:'/images/penn.png'
});
var myTextArea = Ti.UI.createTextArea({
    background:'transparent'
});
textAreaWrap.add(myTextArea);
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
team2005Author Commented:
Hi!

Where do i put that code ?
0
team2005Author Commented:
thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.