Background images on iPad using JavaScript

I am trying to dynamically add an image to the background of a website using JavaScript on the iPad, but I keep getting mixed results, which none are the solution.  I have researched this, but each solution does not solve my issue.  I have tried dynamically adding a style to the head tag, I have tried using the backgroundSize css element, which didn't work either.  Any ideas?

if(navigator.userAgent.indexOf("iPad") != -1) {
	var correctSize = "<style type='text/css'>body {-webkit-background-size: "+skinW+"px "+skinH+"px;}</style>";
	var _head = document.getElementsByTagName("head");
		_head.appendChild(correctSize);
}

Open in new window

LVL 1
pingeyegAsked:
Who is Participating?
 
pingeyegAuthor Commented:
I was actually able to figure this one out.  The following is what I had to do.

1: Check if the browser is on an iPad using the user agent
2: If it is, change the backgroundSize to the image's width
3: Add a meta tag to the head <meta name="viewport" content="width=<<image width>>">

That solved my issues and works perfect in both landscape and portrait view.
0
 
Derek JensenCommented:
You're...adding a style tag to the head element. That's not what you want to do.

What you need to do is include the style tag in the head element(statically, in your HTML), and then change the values of everything in your JS, like so:
    var body = document.getElementsByTagName("body");
    body.ClassName = newBackground;

Open in new window

I'm not 100% sure how to change the value of -webkit-background-size, but using setAttribute should work:
    body[0].setAttribute("-webkit-background-size", skinW+"px "+skinH+"px");

Open in new window

or something. :)
0
 
pingeyegAuthor Commented:
My issue is, I don't have access to the source code where I'm placing this on.  Everything has to been dynamically added.  There may be another way of making this happen, but all I'm trying to do is make the background image show correctly on an iPad that is 1920x1200.

I tried your setAttribute method, but that didn't work.
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
Derek JensenCommented:
Did you try adding the style attribute to the body?
 body[0].setAttribute("style", "-webkit-background-size: "+skinW+"px "+skinH+"px");

Open in new window

0
 
pingeyegAuthor Commented:
Yes, but that didn't work.
0
 
Derek JensenCommented:
I dunno; all those attributes that start with a dash are extremely finicky...

Have you checked in Firebug to see if it assigned it correctly?
If it's assigned correctly in Firebug(using a forced JS assign), and it works correctly as a static style attribute(Not using JS), then there's nothing I can think of that would prevent it from working, so...I'd start there. :-/
0
 
Michel PlungjanIT ExpertCommented:
How about jQuery or jQuery mobile and
$("body").css(".....","....")

?
0
 
pingeyegAuthor Commented:
I hadn't received a solution that solved my issue.  I tried all of the possible solutions, but none worked and jQuery is not allowed for this specific scenario at this time.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.