[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 276
  • Last Modified:

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

0
pingeyeg
Asked:
pingeyeg
  • 4
  • 3
1 Solution
 
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
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 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
 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now