11 Replies Latest reply on Sep 17, 2008 6:56 AM by Newsgroup_User

    css background-position problem

    Level 7
      Hello, I get a problem with this style:

      <style type="text/css" media="screen">
      html {
      margin: 0px;
      padding: 0px;
      height: 100%;
      width: 100%;
      }
      body {
      background-color:#ffffff;
      background-image:url(images/myimage.jpg);
      background-position: center bottom;
      background-repeat:repeat-x;
      }
      </style>

      In ie7 works fine, in firefox 2 the bottom position doesn't work...
      Any suggestion ?

      Thanks
      howdy
        • 1. Re: css background-position problem
          Level 7
          I don't found anything about this.. :-\


          howdy ha scritto:
          > Hello, I get a problem with this style:
          >
          > <style type="text/css" media="screen">
          > html {
          > margin: 0px;
          > padding: 0px;
          > height: 100%;
          > width: 100%;
          > }
          > body {
          > background-color:#ffffff;
          > background-image:url(images/myimage.jpg);
          > background-position: center bottom;
          > background-repeat:repeat-x;
          > }
          > </style>
          >
          > In ie7 works fine, in firefox 2 the bottom position doesn't work...
          > Any suggestion ?
          >
          > Thanks
          > howdy
          • 2. Re: css background-position problem
            Level 7
            howdy wrote:
            > Hello, I get a problem with this style:
            >
            > <style type="text/css" media="screen">
            > html {
            > margin: 0px;
            > padding: 0px;
            > height: 100%;
            > width: 100%;
            > }
            > body {
            > background-color:#ffffff;
            > background-image:url(images/myimage.jpg);
            > background-position: center bottom;
            > background-repeat:repeat-x;
            > }
            > </style>
            >
            > In ie7 works fine, in firefox 2 the bottom position doesn't work...
            > Any suggestion ?

            Can you post an url?

            --
            chin chin
            Sinclair
            • 3. Re: css background-position problem
              Level 7
              Hello, this is the page, simply copy and paste.



              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns=" http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title>test background</title>
              <style type="text/css" media="screen">
              html {
              margin: 0px;
              padding: 0px;
              height: 100%;
              width: 100%;
              }
              body {
              background-color:#ffffff;

              background-image:url( http://img179.imageshack.us/img179/2401/backgroundkc8.jpg);
              background-position: center bottom;
              background-repeat:repeat-x;
              }
              #layer1{
              text-align: center;
              width: 300px;
              margin-right: auto;
              margin-left: auto;
              border: 2px double #003333;
              }
              </style>
              </head>

              <body>
              <div id="layer1">Lorem ipsum dolor sit amet, consectetuer adipiscing
              elit. Quisque cursus, justo a tincidunt volutpat, dui orci feugiat
              justo, at varius odio est quis turpis. Integer nisl enim, condimentum
              et, eleifend et, posuere quis, risus. Nam convallis. Integer diam dui,
              accumsan mattis, dignissim at, dictum rutrum, justo. Praesent lacinia.
              Cras a diam. Aenean quis elit. Duis mauris erat, aliquet nec, malesuada
              laoreet, aliquam sit amet, magna. Ut turpis metus, sollicitudin ac,
              fermentum non, pretium eu, augue. Nunc faucibus, leo eu pharetra
              ultrices, sem augue ultricies risus, at egestas velit lectus ac velit.
              Suspendisse pretium nibh dapibus turpis. Praesent felis mi, vestibulum
              eu, pellentesque et, consequat eu, ante. Nulla accumsan enim et pede.
              Suspendisse potenti.

              Donec eget nulla. Proin et est. Integer volutpat, dolor scelerisque
              bibendum egestas, lacus dui venenatis odio, vitae varius massa eros sit
              amet ligula. Curabitur tellus. Curabitur ultricies volutpat tellus. In
              sodales. Duis cursus mi eu dui placerat porta. Mauris laoreet turpis at
              nunc. Vivamus volutpat, metus dignissim accumsan hendrerit, turpis
              turpis aliquet nulla, non viverra dui dui quis quam. Mauris sem nunc,
              laoreet in, elementum vitae, tempor a, libero. Cras ac turpis sit amet
              risus cursus ultrices. Sed id quam.

              Nulla tortor ligula, adipiscing nec, ornare eu, gravida in, justo. Sed
              elementum vestibulum lectus. Mauris lectus mauris, convallis nec,
              posuere quis, lacinia at, felis. Vestibulum ante ipsum primis in
              faucibus orci luctus et ultrices posuere cubilia Curae; Aenean cursus
              quam eget dui. Maecenas sapien. Aenean pellentesque lobortis mi. Quisque
              tempor ipsum in libero. Pellentesque habitant morbi tristique senectus
              et netus et malesuada fames ac turpis egestas. Class aptent taciti
              sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
              Quisque lacus tellus, ornare quis, euismod et, lacinia sed, justo. Proin
              auctor nisi sed tortor. Fusce in justo et nisl fermentum vehicula.
              Quisque urna felis, lacinia at, viverra in, fermentum ut, lacus. Duis
              tempus. Morbi bibendum libero vitae diam faucibus placerat.

              Praesent eu sapien. Sed ut velit quis magna lobortis malesuada.
              Phasellus dignissim risus ac est. Pellentesque semper sem. Donec porta
              nulla nec quam. Pellentesque aliquet risus id quam. Proin tincidunt erat
              nec nunc. Praesent euismod fringilla ipsum. Donec ornare. Vestibulum
              ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
              Curae; Sed leo.

              Proin non nisi non neque porta tempus. Proin varius velit eu sapien.
              Pellentesque pulvinar arcu id ante. Nunc eu diam. Phasellus euismod,
              felis in scelerisque pharetra, diam augue eleifend mi, a rutrum mauris
              arcu nec orci. Proin sed erat. Pellentesque et libero. Aliquam ante
              velit, ultrices ut, fermentum ac, cursus ut, est. Etiam vitae nisl ac
              metus cursus viverra. Proin non felis. Donec massa. Nullam quam lectus,
              pulvinar eget, condimentum at, tristique in, quam. Proin vehicula
              elementum diam. Proin sapien. Praesent suscipit, lorem at dapibus
              fringilla, orci elit facilisis lacus, at dictum augue velit quis enim.
              Mauris eu mauris. Aliquam rhoncus fermentum pede. Vestibulum gravida
              vulputate mauris.

              Pellentesque consectetuer. Cras tellus justo, iaculis vitae, semper at,
              scelerisque porta, tortor. Pellentesque at mi sed tellus pellentesque
              ultricies. In quis pede. Integer vel tortor at dui elementum suscipit.
              Praesent interdum posuere odio. Integer mollis mattis ipsum. Duis id
              metus ut nulla molestie sagittis. Suspendisse faucibus urna vel metus.
              Sed bibendum, dolor sit amet rhoncus rutrum, lorem turpis pharetra
              tortor, quis viverra neque lorem eget massa. Lorem ipsum dolor sit amet,
              consectetuer adipiscing elit. Suspendisse vestibulum arcu vitae odio.
              Fusce enim lacus, porttitor nec, scelerisque non, viverra eu, enim. Sed
              mauris. In hac habitasse platea dictumst. Duis porta mauris quis orci.
              Donec suscipit turpis eu dui egestas suscipit. Suspendisse potenti. Cum
              sociis natoque penatibus et magnis dis parturient montes, nascetur
              ridiculus mus. In hac habitasse platea dictumst.

              Cras in arcu a mi iaculis ultricies. Pellentesque sed lorem at sem
              euismod blandit. Nullam pede lacus, interdum eu, aliquam a, pretium vel,
              sem. Pellentesque fringilla leo feugiat nibh. Cras non enim. Donec
              luctus ante vel diam. Mauris volutpat sapien eget nunc. Donec nec lectus
              nec leo iaculis fringilla. Sed felis magna, cursus et, hendrerit sit
              amet, pretium at, sapien. Vivamus ornare neque facilisis arcu. Vivamus
              nisi leo, varius ac, sodales ut, dapibus eget, eros. </div>
              </body>
              </html>
              • 4. Re: css background-position problem
                Level 7
                http://murraytestsite.com/background-test.html

                Seems to work OK for me.

                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                ==================


                "howdy" <captain.howdy@nospam.libero.it> wrote in message
                news:gaqru3$i6c$1@forums.macromedia.com...
                >I don't found anything about this.. :-\
                >
                >
                > howdy ha scritto:
                >> Hello, I get a problem with this style:
                >>
                >> <style type="text/css" media="screen">
                >> html {
                >> margin: 0px;
                >> padding: 0px;
                >> height: 100%;
                >> width: 100%;
                >> }
                >> body {
                >> background-color:#ffffff;
                >> background-image:url(images/myimage.jpg);
                >> background-position: center bottom;
                >> background-repeat:repeat-x;
                >> }
                >> </style>
                >>
                >> In ie7 works fine, in firefox 2 the bottom position doesn't work...
                >> Any suggestion ?
                >>
                >> Thanks
                >> howdy

                • 5. Re: css background-position problem
                  Level 7
                  Murray *ACE* ha scritto:
                  > http://murraytestsite.com/background-test.html
                  >
                  > Seems to work OK for me.
                  >

                  If you try to insert a layer doesn't work... see this:



                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                  " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html xmlns=" http://www.w3.org/1999/xhtml">
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                  <title>Untitled Document</title>
                  <meta http-equiv="imagetoolbar" content="no" />
                  <meta name="MSSmartTagsPreventParsing" content="TRUE" />
                  <meta name="robots" content="index,follow" />
                  <style type="text/css" media="screen">
                  html {
                  margin: 0px;
                  padding: 0px;
                  height: 100%;
                  width:100%;
                  }
                  body {
                  background-color:#EEE;
                  background-image:url( http://murraytestsite.com/numbers.png);
                  background-position: center bottom;
                  background-repeat:repeat-x;
                  }
                  </style>
                  </head>
                  <body>
                  <p>This is a test </p>
                  <p> </p>

                  <div style="width:300px;">This is a test This is a test This is a test
                  This is a test This is a test This is a test This is a test This is a
                  test This is a test This is a test This is a test This is a test This is
                  a test This is a test This is a test This is a test This is a test This
                  is a test This is a test This is a test This is a test This is a test
                  This is a test This is a test This is a test This is a test This is a
                  test This is a test This is a test This is a test This is a test This is
                  a test This is a test This is a test This is a test This is a test This
                  is a test This is a test This is a test This is a test This is a test
                  This is a test This is a test This is a test This is a test This is a
                  test This is a test This is a test This is a test This is a test This is
                  a test This is a test This is a test This is a test This is a test This
                  is a test This is a test This is a test This is a test This is a test
                  This is a test This is a test This is a test This is a test This is a
                  test This is a test This is a test This is a test This is a test This is
                  a test This is a test This is a test This is a test This is a test This
                  is a test This is a test This is a test This is a test This is a test
                  This is a test This is a test This is a test This is a test This is a
                  test This is a test This is a test This is a test This is a test This is
                  a test This is a test This is a test This is a test This is a test This
                  is a test This is a test This is a test This is a test This is a test
                  This is a test This is a test This is a test This is a test This is a
                  test This is a test This is a test This is a test This is a test This is
                  a test This is a test This is a test This is a test This is a test This
                  is a test This is a test This is a test This is a test This is a test
                  This is a test This is a test This is a test This is a test This is a
                  test This is a test This is a test This is a test This is a test This is
                  a test This is a test This is a test This is a test This is a test This
                  is a test This is a test This is a test This is a test This is a test
                  This is a test This is a test This is a test This is a test This is a
                  test This is a test This is a test This is a test This is a test This is
                  a test This is a test This is a test This is a test This is a test This
                  is a test This is a test </div>
                  </body>

                  </html>
                  • 6. Re: css background-position problem
                    Level 7
                    That's not a layer. It's a div container. And it'll never work the way you
                    want, since resizing the text will affect the page height without resampling
                    the code. What are you trying to accomplish?

                    --
                    Murray --- ICQ 71997575
                    Adobe Community Expert
                    (If you *MUST* email me, don't LAUGH when you do so!)
                    ==================
                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                    ==================


                    "howdy" <captain.howdy@nospam.libero.it> wrote in message
                    news:gaqvpk$m87$1@forums.macromedia.com...
                    > Murray *ACE* ha scritto:
                    >> http://murraytestsite.com/background-test.html
                    >>
                    >> Seems to work OK for me.
                    >>
                    >
                    > If you try to insert a layer doesn't work... see this:
                    >
                    >
                    >
                    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                    > " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    > <html xmlns=" http://www.w3.org/1999/xhtml">
                    > <head>
                    > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                    > <title>Untitled Document</title>
                    > <meta http-equiv="imagetoolbar" content="no" />
                    > <meta name="MSSmartTagsPreventParsing" content="TRUE" />
                    > <meta name="robots" content="index,follow" />
                    > <style type="text/css" media="screen">
                    > html {
                    > margin: 0px;
                    > padding: 0px;
                    > height: 100%;
                    > width:100%;
                    > }
                    > body {
                    > background-color:#EEE;
                    > background-image:url( http://murraytestsite.com/numbers.png);
                    > background-position: center bottom;
                    > background-repeat:repeat-x;
                    > }
                    > </style>
                    > </head>
                    > <body>
                    > <p>This is a test </p>
                    > <p> </p>
                    >
                    > <div style="width:300px;">This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test This is a test
                    > This is a test This is a test This is a test This is a test </div>
                    > </body>
                    >
                    > </html>

                    • 7. Re: css background-position problem
                      Level 7
                      Hi.

                      It?s true. In firefox 2-3 fail the bottom position. If you delete the
                      height: 100% property from html tag the problem fixed. Why do you need the
                      100% in width and the height into the html tag?


                      "howdy" <captain.howdy@nospam.libero.it> escribió en el mensaje de noticias
                      news:gaqhmu$7v7$1@forums.macromedia.com...
                      > Hello, I get a problem with this style:
                      >
                      > <style type="text/css" media="screen">
                      > html {
                      > margin: 0px;
                      > padding: 0px;
                      > height: 100%;
                      > width: 100%;
                      > }
                      > body {
                      > background-color:#ffffff;
                      > background-image:url(images/myimage.jpg);
                      > background-position: center bottom;
                      > background-repeat:repeat-x;
                      > }
                      > </style>
                      >
                      > In ie7 works fine, in firefox 2 the bottom position doesn't work...
                      > Any suggestion ?
                      >
                      > Thanks
                      > howdy

                      • 8. Re: css background-position problem
                        Level 7
                        Hello, yes it's a container sorry, I need to send to the bottom the
                        background picture... it's possible ?

                        Murray *ACE* write:
                        > That's not a layer. It's a div container. And it'll never work the way
                        > you want, since resizing the text will affect the page height without
                        > resampling the code. What are you trying to accomplish?
                        >
                        • 9. Re: css background-position problem
                          Level 7
                          On Wed, 17 Sep 2008 11:12:26 +0200, howdy
                          <captain.howdy@nospam.libero.it> wrote:

                          >html {
                          > margin: 0px;
                          > padding: 0px;
                          > height: 100%;
                          > width: 100%;
                          >}

                          Change the above to:

                          html, body {
                          margin: 0px;
                          padding: 0px;
                          height: 100%;
                          width: 100%;
                          }

                          However, keep in mind that this will place your background image at
                          the bottom of the browser window. If your content is long enough to
                          require a scroll bar, it's going to get ugly when you scroll down.

                          Gary
                          • 10. Re: css background-position problem
                            Level 7
                            Hello, I need the height: 100% because a background of container is the
                            total height of the page T_T


                            Miguel write:
                            > Hi.
                            >
                            > It?s true. In firefox 2-3 fail the bottom position. If you delete the
                            > height: 100% property from html tag the problem fixed. Why do you need
                            > the 100% in width and the height into the html tag?
                            >
                            >
                            > "howdy" <captain.howdy@nospam.libero.it> escribió en el mensaje de
                            > noticias news:gaqhmu$7v7$1@forums.macromedia.com...
                            >> Hello, I get a problem with this style:
                            >>
                            >> <style type="text/css" media="screen">
                            >> html {
                            >> margin: 0px;
                            >> padding: 0px;
                            >> height: 100%;
                            >> width: 100%;
                            >> }
                            >> body {
                            >> background-color:#ffffff;
                            >> background-image:url(images/myimage.jpg);
                            >> background-position: center bottom;
                            >> background-repeat:repeat-x;
                            >> }
                            >> </style>
                            >>
                            >> In ie7 works fine, in firefox 2 the bottom position doesn't work...
                            >> Any suggestion ?
                            >>
                            >> Thanks
                            >> howdy
                            >
                            • 11. Re: css background-position problem
                              Level 7
                              I found a solution... another container 100% with background... :-\