10 Replies Latest reply on Mar 23, 2010 11:37 AM by shunithD

    Make a background image of a DIV Elastic?

    egigharbor

      I am trying to get the background image of a div to resize when the browser text view is increased or decreased.

       

      There is a great posting at http://jontangerine.com/silo/css/elastic-layout/ that gives a lot of detail about elastic layouts and addresses resizing images on the page See his example at http://jontangerine.com/silo/css/pixels-to-ems/

       

      However, it did not work for me when I attempted to apply this to the background image.  Does anyone know the code for this?

       

      Thank you.

        • 1. Re: Make a background image of a DIV Elastic?
          pziecina Level 6

          Hi

           

          Neither of the links you provided have anything to do with the effect you describe.

           

          PZ

          • 2. Re: Make a background image of a DIV Elastic?
            shunithD Level 3

            egigharbor wrote:

             

            I am trying to get the background image of a div to resize when the browser text view is increased or decreased.

            A background image cannot be made 'elastic'. It  can be set to a fixed size (the original size) or it can be 'tiled' on either the horizontal or vertical axis or both. But it will not 'stretch' as the browser window is increased or reduced.

            1 person found this helpful
            • 3. Re: Make a background image of a DIV Elastic?
              egigharbor Level 1

              The page I am working on is at http://www.gigharborrealestate.com/GHRE3.html

               

              In ie8  under Menu: View>text size> larger or largest everything on the page stretches except the 2 images in my banner. The example at  http://jontangerine.com/silo/css/pixels-to-ems/ stretches everything including images when the text is resized.

               

              What I am trying to learn is how to design a page that will increase or decrease all elements of the page (in constrained proportions) based on the settings of the individual user.  Any ideas or links to tutorials sure would be appreciated.

               

              Regards,

               

              Mike

              • 4. Re: Make a background image of a DIV Elastic?
                egigharbor Level 1

                Okay, but I think a regular image can???  Would the appropriate technique be to put the image in the banner instead of using it as a background image?

                The page I am working on is http://www.gigharborrealestate.com/GHRE3.html

                 

                What would be the right approach?

                 

                thank you,

                 

                Mike

                • 5. Re: Make a background image of a DIV Elastic?
                  pziecina Level 6

                  Hi

                   

                  You have answered your own question as to why the images are not enlarging -

                  Menu: View>text size> larger

                  Select, Zoom - Zoom in, not test size as this does exactly what it says.

                   

                  PZ

                  • 6. Re: Make a background image of a DIV Elastic?
                    egigharbor Level 1

                    The page zooms without a problem - It is the text sizing function of the browser that does not allow my image to increase proportionately.  I know  that there is a way because I tried it on http://jontangerine.com/silo/css/pixels-to-ems/ and his images increase with the text.

                     

                    For some reason I have been having trouble getting it to work in my banner.

                    • 7. Re: Make a background image of a DIV Elastic?
                      pziecina Level 6

                      Hi

                       

                      His images do not increase with the view - increase text size. There are no images on the page you link to except the ones at the bottom, (twitter, etc) and these do not increase in size.

                      Plus the article is wrong, you cannot simply convert pixels to ems, as this depends on the users settings or the font size set.

                       

                      PZ

                      www.pziecina.com

                      • 8. Re: Make a background image of a DIV Elastic?
                        shunithD Level 3

                        egigharbor wrote:

                         

                        The page zooms without a problem - It is the text sizing function of the browser that does not allow my image to increase proportionately.  I know  that there is a way because I tried it on http://jontangerine.com/silo/css/pixels-to-ems/ and his images increase with the text.

                         

                        For some reason I have been having trouble getting it to work in my banner.

                        Ok... you're asking for trouble and opening up a can of worms... but what you can do is insert the image and remove the width and height attributes. The image will resize as the page zooms in and out... will work in some browsers, not all (eg. works in FF but not IE6). Be warned though that as the image magifies, pixellation will set in... zooming out is not so bad... as the image just compresses.

                        • 9. Re: Make a background image of a DIV Elastic?
                          egigharbor Level 1

                          Thank you very much for your response.  I figured it out last night and was going to post the answer and then I received your post this morning answering the question.

                           

                          In regard to yourcomment about pixelation, would a resolution be to give a maximum size to the allowed text size increase?  If so, would the proper method be to apply a maximum size on the container DIV?

                           

                          Here is the code I used to make the images size proportionately:

                           

                            <div id="header">
                          <img src="images/Tacoma-Narrows-bridges.jpg" alt="Tacoma Narrows Bridges from Tacoma to Gig Harbor" name="Bridge" class="image" id="Bridge" />
                          <a href="mailto:Mike@GigHarborRealEstate.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/compassContact2.jpg',1)"><img src="images/compassContact1.jpg" alt="Email Mike Esteb of Keller Williams Realty" name="Contact" border="0" class="contact" id="Contact" /></a>
                          <!-- end #header --></div>

                           

                          }
                          .image {
                          height: 12.5em;
                          width: 41.25em;
                          }

                           

                          http://www.gigharborrealestate.com/GHRE3.html

                          • 10. Re: Make a background image of a DIV Elastic?
                            shunithD Level 3

                            egigharbor wrote:

                             

                            In regard to yourcomment about pixelation, would a resolution be to give a maximum size to the allowed text size increase?  If so, would the proper method be to apply a maximum size on the container DIV?

                            Egig... you're going about it all wrong and tying yourself up in non-issues... a maximum size? What maximum? The moment you remove the image w x h parameters, it could be all over the place....

                             

                            Just design for what looks good with flexibility for text to expand...

                             

                            Take a look at pages on www.projectseven.com. Zooming in pixelates the images... but they don't give an eff... they know that anyone zooming in so close is doing so because of readability issues, etc. (bad eyesight). BTW, they're kind of (putting it mildly) CSS experts...

                             

                            Al Sparber used to hang around here as well, till last April when these new forums were introduced and the NNTP access was killed...