12 Replies Latest reply: Nov 15, 2012 7:14 AM by pziecina RSS

    Responsive full-screen div resizing in CS6

    RobertsAdobeScreenName Community Member

      I have Dreamweaver CS6 and am new to Dreamweaver (and web design in general, although I have been doing graphics for decades). I am trying to have a background that responsively resizes itself with the resizing of browser window AND is always 220 pixels down from the top of the screen (ie, I want the image to always horizontally fill the screen, not distort, and always be 220 pixels from the top). At first I tried this the most logical way, doing it as a background image, setting the image to "cover" and setting "Top" to 220px. This did exactly what I wanted it to ... in Safari. But in Firefox, the image was flush with the top of the screen. After trying various things to get it to work in Firefox as well, I figured out a workaround: I took out the background image and placed it in a div at "Left: 0px" and "Top: 220px". This displays as I want it to in both Safari and Firefox ... except that the image no longer resizes itself: it stays static and gets cut off when the user reduces their browser window size. So my question (finally!): Is there a way in Dreamweaver CS6 to have the jpg image inside of a div always fill the screen horizonatlly, resize itself responsively with the resizing of the browser window, and always be a set distance from the top (in this case 220px)? Thank you for any assistance!!!

        • 1. Re: Responsive full-screen div resizing in CS6
          Nancy O. MVP

          No APDivs required.  Simply insert image into %-based layout and add margin-top.

           

          body {

          width:100%;

          }

           

          #your_img {

          max-width:100%;

          margin-top:200px;

          }

           

          HTML: (omit the height & width attributes)

           

          <img id="your_image" src="image.jpg" alt="description">

           

           

          NOTE: some distortion is apt to occur whenever you re-scale images.  There's not much you can do about that.

           

          Nancy O.

          • 2. Re: Responsive full-screen div resizing in CS6
            RobertsAdobeScreenName Community Member

            Thank you Nancy. I tried this out exactly as you described and got the same results that I get using an APDiv for the image: It displays the proper distance down from the top in both Firefox and Safari, as I want it to, but the image still does not responsively resize with the browser window in either: it stays static and gets cut off when the browser window is made smaller. Any other thoughts?

             

            Thanks again,

             

            Rob

            • 3. Re: Responsive full-screen div resizing in CS6
              Nancy O. MVP

              Can you show us a link to your test page?

               

              You may need to amend your HTML code with a height & width of 100%.

               

              <img id="your_image" src="image.jpg" alt="description" height="100%" width="100%">

               

               

              Nancy O.

              • 4. Re: Responsive full-screen div resizing in CS6
                RobertsAdobeScreenName Community Member

                Nancy, thank you so much! I tried creating a brand new html document with nothing but the background in it, all set up as you suggested in your original feedback, and it worked exactly as I had been wanting it to, so I must have done something wrong when I tried it before. Once I had the new html document working correctly, I just cut and pasted the code into the appropriate places in my real html file, and again, it worked like a charm. THANK YOU!!! Every other glitchy thing that I've run into so far, I've eventually been able to figure out, but this one had me stumped, and I thought I was going to have to settle for a web site that was noticeably less than what I had originally planned. Now I can move forward creating the rest of the site, without that nagging frustration and sense of failure in the back of my mind. I greatly appreciate your help!

                • 5. Re: Responsive full-screen div resizing in CS6
                  RobertsAdobeScreenName Community Member

                  One other thing that on this issue that I can live with if I have to, but it would be great if I didn't have to. Using the solution described above, the left edge of the background image is no longer flush with the left edge of the screen: when you view it in a browser, or in Dreamweaver, it appears to be about 10 pixels in from the left edge of the page. I assumed that I could simply fix this with:

                   

                  #testbkgd {

                            left:0%;

                            max-width:100%;

                      margin-top:200px;

                  }

                   

                  but that seems to have no effect -- it still appears to be 10 pixels in instead of flush left. Thoughts? Thanks for being patient with this newbie!

                  • 6. Re: Responsive full-screen div resizing in CS6
                    Nancy O. MVP

                    Now I'm a little confused.

                    If you want your background-image to fill the viewport, use CSS background-size:cover

                    http://alt-web.com/TEST/Resizable-BG.shtml

                     

                    Or this jQuery plug-in

                    http://www.buildinternet.com/project/supersized/

                     

                    See demo

                    http://buildinternet.com/project/supersized/core/3.2/core.html

                     

                    Nancy O.

                    • 7. Re: Responsive full-screen div resizing in CS6
                      webnewbie1284 Community Member

                      How do I install this plugin in my page?

                      • 8. Re: Responsive full-screen div resizing in CS6
                        Nancy O. MVP

                        These steps are pretty much the same for any jQuery plug-in.

                         

                        #1 Download latest version of plug-in. 

                        http://www.buildinternet.com/project/supersized/download.html

                         

                        #2 Extract the zipped files and save them to your local site folder. I prefer to keep scripts in my Scripts folder & CSS files in my Styles folder but that's up to you.

                         

                        #3 jQuery has 3 basic parts to it:

                        • the core code library which you ref in your <head>
                        • the plug-in scripts & css files which you ref in your <head>
                        • the function code inside <script> tags that invokes the plug-in -- I prefer to put this above closing </body> tag.

                         

                        <head>

                         

                        <!-- jQuery latest core library -->

                        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

                        </script>

                         

                        <!-- links to plug-in scripts & CSS files-->

                        <script type="text/javascript" src="Scripts/supersized.core.3.2.0.min.js"></script>

                         

                        <link rel="stylesheet" href="Styles/supersized.core.css" type="text/css"

                        media="screen" />

                         

                        </head>

                         

                         

                        <body>

                         

                        Your page content goes here... yada, yada, yada....

                         

                         

                        <!--Plug-in function-->

                        <script type="text/javascript">

                        jQuery(function($){
                          $.supersized({
                        slides  :       [ {image : 'Images/Your-Image.jpg', title : 'Your Image Title'} ]
                        });
                        });
                        </script>

                         

                        </body>

                         

                        For further details on how to use your plug-in, refer to Demos & Documentation

                        http://www.buildinternet.com/project/supersized/demo.html

                        http://www.buildinternet.com/project/supersized/docs.html

                         

                         

                         

                        Nancy O.

                        • 9. Re: Responsive full-screen div resizing in CS6
                          RobertsAdobeScreenName Community Member

                          Thank you for the reply Nancy. I did not know how to create a test page (as I said, I'm new to DW), so I waited to respond until I actually had my site live (gasp).

                           

                          The site is at http://www.robertrafn.com . The code that finally worked for me was:

                           

                          CSS:

                           

                          #BkgdImage {

                                    position: absolute;

                                    left: 0%;

                                    top: 215px;

                                    width: 100%;

                                    z-index: 1;

                                    float: left;

                                    height: 4000px;

                          }

                           

                          body:

                           

                          <div id="BkgdImage"><img src="Images/BkgdImageFile.jpg" width="100%" height= "auto" alt=""></div>

                           

                          I'm happy with the results, except ... in Internet Explorer, the background image doesn't show up -- it's just a thin horizontal line at the top of where the div is. I tried, in my CSS, using a height of "auto", no height, or "4000px" (number randomly chosen to be way bigger than I needed): all work fine in all other browsers, but don't solve the Internet Explorer problem. I tried, in my body, using the image's actual pixel height, which cause the image to distort horizontally in all browsers when the browser window is re-sized. I also tried, in body, a height of "100%", which caused the image to improperly distort horizontall and vertically in all browsers when the browser window was re-sized. And I tried, in body, a height of "", which functions the same (properly) as it currently does using a height of "auto" -- ie, it works correctly in all browsers except Internet Explorer.

                           

                          My goal is to have the background image be visible and look and behave the same in all browsers,  including IE. Any thoughts on how to accomplish that?

                          • 10. Re: Responsive full-screen div resizing in CS6
                            RobertsAdobeScreenName Community Member

                            FYI, I finally figured it out. My solution to get the background image (in a div) to show up in Internet Explorer was:

                             

                            In CSS:

                             

                            #BkgdImage {

                                      position: absolute;

                                      left: 0%;

                                      top: 215px;

                                      width: 100%;

                                      z-index: 1;

                                      float: left;

                                      height: 4000px;

                            }

                             

                             

                            And in body:

                             

                            <div id="BkgdImage"><img src="Images/BkgdImageFile.jpg" width="100%" alt=""></div>

                             

                             

                            In other words, the one solution that I hadn't tried was to just delete "height" completely from the body. That did it!

                             

                             

                            Hope that helps someone else!

                            • 11. Re: Responsive full-screen div resizing in CS6
                              MurraySummers ACP/MVPs

                              Just so you'll know, you can't float an absolutely positioned element.  I mean if it's absolutely positioned, where will it float?  And if it floated what would it float around since an absolutely positioned element is removed from the normal flow?  The page ignores the presence of any absolutely positioned elements, and those elements ignore the presence of any other elements except for ancestor positioned elements.

                               

                              Just saying.

                              • 12. Re: Responsive full-screen div resizing in CS6
                                pziecina Community Member

                                Hi

                                 

                                You may wish to reconsider your solution to this, (overcomplicated anyway) as in most browsers the section with content on your page only takes up about 15% of the browser size that is being displayed, (scroll down).

                                 

                                Also in IE8 and below the menu is not showing and the header area is white, (with the same problem as above).

                                 

                                To do what you wish use the background-size property, (most versions of FF still require the vendor prefix) and the IEFilter, (never apply an IEFilter to the html tag) will do this for IE8 and below, (use an IECC).

                                 

                                see - http://cookbooks.adobe.com/post_Scale_Background_image_to_browser_size-17590.html

                                 

                                PZ