10 Replies Latest reply on Jul 15, 2008 7:29 AM by Newsgroup_User

    Fixed Background Help

    Martin.Maggiore
      Guys,

      Im pretty new to Dreamweaver and am having some problems designing a website.

      I am wanting to have a fixed background and then a square box with my content in. I dont want the background to move when I scroll down the page, but I do want the box with my content to scroll.

      Any ideas how I can do this?

      Next question... how come when I design a page in Dreamweaver, when I view it in IE its positioned completely different? i.e. I centre a picture in Dreamweaver and when I view it in IE its in the top left hand corner etc its very random

      Thanks in advance
        • 1. Re: Fixed Background Help
          Level 7
          > I am wanting to have a fixed background and then a square box with my
          > content
          > in. I dont want the background to move when I scroll down the page, but I
          > do
          > want the box with my content to scroll.

          The fixed background is simple, but if only the content region is scrolling,
          why do you need a fixed background.

          However, putting content into a scrolling region like that is usually a bad
          idea -

          1. It's user unfriendly - adding another vertical scrollbar can be
          confusing *and* troublesome.
          2. The content area will not print fully (only the visible region can
          print) unless you add a print stylesheet to the page.
          3. This content is usually the most important copy on your page - why force
          someone to scroll to read it?

          > Next question... how come when I design a page in Dreamweaver, when I view
          > it
          > in IE its positioned completely different?

          It's because "Im pretty new to Dreamweaver".

          Show us your code, and we'll tell you why this is happening. The truth of
          the matter is this - it's always in the code. If you don't feel comfortable
          looking at your code, then DW will be an exercise in frustration for you.
          The best way to get un-frustrated would be to spend some time here -

          http://www.w3schools.com

          --
          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
          ==================


          "Martin.Maggiore" <webforumsuser@macromedia.com> wrote in message
          news:g5htds$9c0$1@forums.macromedia.com...
          > Guys,
          >
          > Im pretty new to Dreamweaver and am having some problems designing a
          > website.
          >
          > I am wanting to have a fixed background and then a square box with my
          > content
          > in. I dont want the background to move when I scroll down the page, but I
          > do
          > want the box with my content to scroll.
          >
          > Any ideas how I can do this?
          >
          > Next question... how come when I design a page in Dreamweaver, when I view
          > it
          > in IE its positioned completely different? i.e. I centre a picture in
          > Dreamweaver and when I view it in IE its in the top left hand corner etc
          > its
          > very random
          >
          > Thanks in advance
          >

          • 2. Re: Fixed Background Help
            Level 7
            Murray *ACE* wrote:
            >> I am wanting to have a fixed background and then a square box with my
            >> content
            >> in. I dont want the background to move when I scroll down the page,
            >> but I do
            >> want the box with my content to scroll.
            >
            > The fixed background is simple, but if only the content region is
            > scrolling, why do you need a fixed background.

            I think what they mean is they want the content to scroll 'normally' not
            in a scrolling <div> but the background to remain static.

            However either I'm getting old or the whole world is going mad because
            lately I can't understand about 80% of the posts in this forum :)


            • 3. Re: Fixed Background Help
              Level 7
              > However either I'm getting old or the whole world is going mad because
              > lately I can't understand about 80% of the posts in this forum :)

              I share this sentiment, and think it's likely that both are true!

              > and then a square box with my content in. I dont want the background to
              > move when I scroll down the page, but I do want the box with my content to
              > scroll.

              Sure sounds like a scrolling region to 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
              ==================


              "Osgood" <notavailable@thisaddress.com> wrote in message
              news:g5i0cu$cd4$1@forums.macromedia.com...
              > Murray *ACE* wrote:
              >>> I am wanting to have a fixed background and then a square box with my
              >>> content
              >>> in. I dont want the background to move when I scroll down the page, but
              >>> I do
              >>> want the box with my content to scroll.
              >>
              >> The fixed background is simple, but if only the content region is
              >> scrolling, why do you need a fixed background.
              >
              > I think what they mean is they want the content to scroll 'normally' not
              > in a scrolling <div> but the background to remain static.
              >
              > However either I'm getting old or the whole world is going mad because
              > lately I can't understand about 80% of the posts in this forum :)
              >
              >

              • 4. Re: Fixed Background Help
                Martin.Maggiore Level 1
                Thanks for your help so far...

                Im making a photography website, here is the design so far

                Home Page - http://i152.photobucket.com/albums/s165/Martin0Maggiore/HomePage.jpg

                Gallery - http://i152.photobucket.com/albums/s165/Martin0Maggiore/GalleryPage1.jpg

                the Home Page doesnt need to scroll at all, it just needs to sit exactly like that, as if that was the full page.

                the gallery however, with it going lengthways, will need to scroll to view the images, however I dont want the background to move with it.

                as an example, please see http://www.sophiepickard.co.uk/webgallery1.php

                You may need to copy and paste the links above manually :)

                Any help would be appreciated...

                Thanks
                • 5. Re: Fixed Background Help
                  Level 7
                  Martin.Maggiore wrote:
                  > Thanks for your help so far...
                  >
                  > Im making a photography website, here is the design so far
                  >
                  > Home Page -
                  > http://i152.photobucket.com/albums/s165/Martin0Maggiore/HomePage.jpg
                  >
                  > Gallery -
                  > http://i152.photobucket.com/albums/s165/Martin0Maggiore/GalleryPage1.jpg
                  >
                  > the Home Page doesnt need to scroll at all, it just needs to sit exactly like
                  > that, as if that was the full page.
                  >
                  > the gallery however, with it going lengthways, will need to scroll to view the
                  > images, however I dont want the background to move with it.
                  >
                  > as an example, please see http://www.sophiepickard.co.uk/webgallery1.php
                  >
                  > You may need to copy and paste the links above manually :)
                  >
                  > Any help would be appreciated...
                  >
                  > Thanks
                  >

                  So I was correct in my diagnosis and Murray was wrong lol. (well he is a
                  pensioner so he can be forgiven) :)

                  All you need to do is use background-attachment: fixed; on the 'body'
                  tag as seen below:

                  This is taken from the site you refer to above and why the background
                  remains static and the foreground scrolls.

                  body {
                  background-image:url(../imgs/background2.jpg);
                  background-repeat:no-repeat;
                  background-attachment:fixed;
                  background-color:#3F3F3E;
                  font-family:Arial, Helvetica, sans-serif;
                  font-size:11px;
                  margin-top: 20px;
                  }
                  • 6. Re: Fixed Background Help
                    Martin.Maggiore Level 1
                    I did think that was the case but I was having issues with the positioning when I did that.

                    I think part of the problem is the design of the background.

                    Out of curiosity, when making a web page... what size/dimensions do you set your page?

                    I make my websites first in photoshop and then slice them into Dreamweaver
                    • 7. Re: Fixed Background Help
                      Level 7
                      > Out of curiosity, when making a web page... what size/dimensions do you
                      > set
                      > your page?

                      To make your decision you need to have some ideas about the following
                      issues -

                      1. What is the primary target demographic for this site?
                      2. What are the browsing habits of that demographic? Do they normally have
                      their browser window maximized on the screen?
                      3. If they usually have their browser maximized, what is the typical screen
                      width?
                      4. If they usually do NOT have their browser maximized, what is the MINIMUM
                      screen width in that demographic.
                      5. How do I want to build the page?
                      a. Fixed width and left aligned?
                      b. Fixed width and centering?
                      c. Flexible to fill whatever width from left to right?
                      d. Flexible (within limits) and left aligned?
                      e. Flexible (within limits) and centering?

                      As you can see, this decision is probably much more complex than you
                      thought, and will require that you know quite a bit about your intended
                      target visitor and their browsing habits.

                      If you elect to go with 5a, or 5b, then your decision would be - 'what is
                      the mimimum browser width I want to support without horizontal scrolling?'.
                      Once you have determined that minimum supported width, all of your decisions
                      are made. That's how wide you want your page to be.

                      If you elect to go with 5c, then you just build your page within a flexible
                      container (the simplest example - although an obsolet one - would be to use
                      a 100% width table to hold the entire page). Be aware that pages with
                      limited text content can look VERY sparse and empty on wide viewports when
                      built in this way.

                      If you elect to go with 5d, or 5e, then you would add this sophistication to
                      your decision matrix -

                      'what is the greatest width I want to allow the page and its contents to
                      become?'

                      In this case, you would use the CSS styles - 'min-width' and 'max-width' on
                      the primary page container. Just so you'll know, although these styles are
                      well supported *now*, earlier versions of IE (and some other browsers) will
                      not support them so reliably.

                      So - which is it? 8)
                      --
                      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
                      ==================


                      "Martin.Maggiore" <webforumsuser@macromedia.com> wrote in message
                      news:g5i93d$ldg$1@forums.macromedia.com...
                      >I did think that was the case but I was having issues with the positioning
                      >when
                      > I did that.
                      >
                      > I think part of the problem is the design of the background.
                      >
                      > Out of curiosity, when making a web page... what size/dimensions do you
                      > set
                      > your page?
                      >
                      > I make my websites first in photoshop and then slice them into Dreamweaver
                      >

                      • 8. Re: Fixed Background Help
                        Level 7
                        Martin.Maggiore wrote:
                        > I did think that was the case but I was having issues with the positioning when
                        > I did that.
                        >
                        > I think part of the problem is the design of the background.
                        >
                        > Out of curiosity, when making a web page... what size/dimensions do you set
                        > your page?

                        Personally mine (when I do them, which is not often) are around 760px
                        wide for a fixed width although I think this is changing now that new
                        computers ship with high screen resolutions as default.

                        Its really all about how wide the end user has their browser viewport
                        set to and you cannot determine that. All that is happening at the
                        moment is designers are setting wider widths because of screen resolution.

                        Take the bcc.co.uk site for instance that's now nearly 1000px fixed width.


                        > I make my websites first in photoshop and then slice them into Dreamweaver



                        Sounds ok to me.
                        • 9. Re: Fixed Background Help
                          Level 7
                          On Tue, 15 Jul 2008 14:49:23 +0100, Osgood
                          <notavailable@thisaddress.com> wrote:


                          >
                          >Take the bcc.co.uk site for instance that's now nearly 1000px fixed width.
                          >
                          >


                          given that you really mean the bbc.co.uk/ website - :-))
                          yes it is
                          and a great shame too as I know many people with computers / screens
                          which means they have to use the scroll bar.

                          --

                          ~Malcolm~*...
                          ~*
                          • 10. Re: Fixed Background Help
                            Level 7
                            Malcolm _ wrote:
                            > On Tue, 15 Jul 2008 14:49:23 +0100, Osgood
                            > <notavailable@thisaddress.com> wrote:
                            >
                            >
                            >> Take the bcc.co.uk site for instance that's now nearly 1000px fixed width.
                            >>
                            >>
                            >
                            >
                            > given that you really mean the bbc.co.uk/ website - :-))
                            > yes it is
                            > and a great shame too as I know many people with computers / screens
                            > which means they have to use the scroll bar.
                            >

                            Yes, me too, unless I pull the browser window open wider. But then again
                            I can set my screen resolution to something a little higher and can then
                            fit the page in a narrower browser window.

                            I don't think there is really any definitive way to determine the best
                            solution.......you just choose one and keep your fingers crossed and arm
                            yourself with a cart load of lot of bullsh_t if the client asks questions.