Solved

How to make background image responsive for ipad phone ie

Posted on 2014-01-29
3
331 Views
Last Modified: 2014-04-03
I am using the script below to for random background images.
 I am also using a css class which successfully make normal (non-background images) responsive.
I want to know a way to make the random background images responsive to display size eg IE, ipad, smartphone. At moment they cover smaller display but distorted and IE shows up as fixed in left top.
Thanks in advance and anticipation .

<script type="text/javascript">
var totalCount = 5;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundSize = '100% 100%';
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundAttachment="fixed";
// Background repeat
}
</script>
0
Comment
Question by:LeighJor
3 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39819687
Try
document.body.style.backgroundSize = 'cover';

How it looks/scales will depend on the image size to begin with
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now