3 Replies Latest reply on Jun 9, 2012 2:24 AM by zabberwan

    Resizable BG Images on Home Page

    zabberwan

      Hi Folks,

       

      http://venture-wilderness.com

       

      The link above opens the home page and if you click Ctrl+U after loading the page in your browser, you should get the complete code including the jQuery used. Click also the link on line 14 of the source file to see the CSS used.

       

      It is with the above file that I need some help. The idea is to have the complete page to fit the viewport seamlessly. The background image (mountain, sky, tent and a transparent strip. Image size: 1920 x 945 pixels) does this correctly with the help of jQuery. However, as you will note the "title", the "navigation" and the "footer" images do not react to resizing the viewport.

       

      I would like to have this occur on all images including the titel, navigation and footer between a viewport width of 1024 and maximum of 1920 pixels. Below that it should change according to the "tablet" and "phone" CSS (not done as yet).

       

      When you reduce the viewport width you will see the browser background-color (below the reduced image) as white, but I would prefer it show as black. I tried by creating a new div in the body and shifting the images into that and by applying a background image to the body tag, but that makes the transparent strip also black. I also tried changing classes with jQuery, but that did not cause the desirable effect.

       

      I would really appreciate some help with the problem..

       

      Thanking you in advance.

       

      zabberwan