0

I have to make a widget responsive. The url is http://dev.pt-staging.com/discovery/careerpathwidget/index.html

The problem is it has lot of images & a background image too. I cropped background image for Ipod 320 x 480 (portrait ) it looked fine but when I see it in landscape mode it looked as it`s cut. I am amaze that there are many devices and many orientation how can I set my background image to appear on all in a same look and feel.

Q2 I want to make a design which looks good on all mobile phone so that if user see it in portrait the design looked shrink and in landscape it looked expanded, I dont want to create design for each & every resolution. So which resolution I should take to cover most of the smart mobile phones. I think on tablet my widget can appear easily as its 767 in width .

Please guide me , The site is currently responsive till i tried

ChAmp NOmi
  • 51
  • 5
  • Refer If you want to make your site responsive try using some frameworks like bootstrap or foundation.. – Prasanna Aarthi Dec 27 '13 at 11:41
  • I know how to make site responsive with twitter bootstrap I have used it in my other site too but those sites are textual site with few images not a complete widget with lotza images and a background image too , I am not finding a proper solution for this background image – ChAmp NOmi Dec 27 '13 at 12:26

1 Answers1

0

This may do it. It worked for me.

body {
    margin:0;
    padding:0;
    background:#d6d3c0;
    background-image: url(../images/background.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}
julienc
  • 19,087
  • 17
  • 82
  • 82
lycaon
  • 15
  • 3