15 Replies Latest reply on Sep 29, 2008 8:25 AM by Newsgroup_User

    Bottom background image

    Josie815 Level 1
      I've already added a top background image, and I want to add a bottom image (i.e. www.fujinon.com). Athough I've searched and tried CSS samples of this, I'm still not getting it right.
        • 1. Re: Bottom background image
          nelly@egdesign Level 1
          You need to create a table with a cell at the top, cells in the middle and a cell at the bottom to create another background image in it. You can adjust the cell sizes to the same as your background image - that way the image will not tile and look weird.
          • 2. Re: Bottom background image
            Level 7
            You can attach one background image to the html element and the second to
            the body element as demoed here:
            http://www.designsbycharroncapri.com/temp-5.html
            The vertical pattern image (tiled) is on the html. The horizontal image
            (also tiled) is on the body. Here is the relevant CSS:
            html{ background-image: url(images/bodyBack.png);}
            body { background: url(images/headerBack.png) repeat-x;}

            --

            Walt


            "HappinessGrows" <webforumsuser@macromedia.com> wrote in message
            news:gbh1fa$5ks$1@forums.macromedia.com...
            > I've already added a top background image, and I want to add a bottom
            > image (i.e. www.fujinon.com). Athough I've searched and tried CSS samples
            > of this, I'm still not getting it right.


            • 3. Re: Bottom background image
              Josie815 Level 1
              quote:

              Originally posted by: nelicans
              You need to create a table with a cell at the top, cells in the middle and a cell at the bottom to create another background image in it. You can adjust the cell sizes to the same as your background image - that way the image will not tile and look weird.


              Thanks for your reply. I have my webpages in div sections for the top, middle and bottom areas. So, I'm hoping for another solution as I wouldn't want to go back and recreate tables in place of this.
              • 4. Re: Bottom background image
                Josie815 Level 1
                quote:

                Originally posted by: Newsgroup User
                You can attach one background image to the html element and the second to
                the body element as demoed here:
                http://www.designsbycharroncapri.com/temp-5.html
                The vertical pattern image (tiled) is on the html. The horizontal image
                (also tiled) is on the body. Here is the relevant CSS:
                html{ background-image: url(images/bodyBack.png);}
                body { background: url(images/headerBack.png) repeat-x;}

                --

                Walt


                "HappinessGrows" <webforumsuser@macromedia.com> wrote in message
                news:gbh1fa$5ks$1@forums.macromedia.com...
                > I've already added a top background image, and I want to add a bottom
                > image (i.e. www.fujinon.com). Athough I've searched and tried CSS samples
                > of this, I'm still not getting it right.





                Thanks for your reply and CSS information. I placed the html as you suggested in my CSS along with changing the body portion to mirror what you indicated, and still don't have it right. The "bottom" image tiled as vertical places the image as a background on either side of the body of my webpage. What am I missing to place this image across the bottom?
                • 5. Re: Bottom background image
                  Level 7
                  >>What am I
                  >>missing to place this image across the bottom?

                  You're missing an understanding of how to position the image. It's a bit
                  complicated but once you grasp it you will have a very powerful tool in your
                  web design arsenal. This is a good explanation:
                  http://reference.sitepoint.com/css/background-position

                  --

                  Walt


                  "HappinessGrows" <webforumsuser@macromedia.com> wrote in message
                  news:gbiohv$a2h$1@forums.macromedia.com...
                  >
                  quote:

                  Originally posted by: Newsgroup User
                  > You can attach one background image to the html element and the second to
                  > the body element as demoed here:
                  > http://www.designsbycharroncapri.com/temp-5.html
                  > The vertical pattern image (tiled) is on the html. The horizontal image
                  > (also tiled) is on the body. Here is the relevant CSS:
                  > html{ background-image: url(images/bodyBack.png);}
                  > body { background: url(images/headerBack.png) repeat-x;}
                  >
                  > --
                  >
                  > Walt
                  >
                  >
                  > "HappinessGrows" <webforumsuser@macromedia.com> wrote in message
                  > news:gbh1fa$5ks$1@forums.macromedia.com...
                  > > I've already added a top background image, and I want to add a bottom
                  > > image (i.e. www.fujinon.com). Athough I've searched and tried CSS
                  > > samples
                  > > of this, I'm still not getting it right.
                  >
                  >
                  >

                  >
                  > Thanks for your reply and CSS information. I placed the html as you
                  > suggested
                  > in my CSS along with changing the body portion to mirror what you
                  > indicated,
                  > and still don't have it right. The "bottom" image tiled as vertical places
                  > the
                  > image as a background on either side of the body of my webpage. What am I
                  > missing to place this image across the bottom?
                  >
                  >


                  • 6. Re: Bottom background image
                    Josie815 Level 1
                    quote:

                    Originally posted by: Newsgroup User
                    >>What am I
                    >>missing to place this image across the bottom?

                    You're missing an understanding of how to position the image. It's a bit
                    complicated but once you grasp it you will have a very powerful tool in your
                    web design arsenal. This is a good explanation:
                    http://reference.sitepoint.com/css/background-position

                    --

                    Walt


                    "HappinessGrows" <webforumsuser@macromedia.com> wrote in message
                    news:gbiohv$a2h$1@forums.macromedia.com...
                    >
                    quote:

                    Originally posted by: Newsgroup User
                    > You can attach one background image to the html element and the second to
                    > the body element as demoed here:
                    > http://www.designsbycharroncapri.com/temp-5.html
                    > The vertical pattern image (tiled) is on the html. The horizontal image
                    > (also tiled) is on the body. Here is the relevant CSS:
                    > html{ background-image: url(images/bodyBack.png);}
                    > body { background: url(images/headerBack.png) repeat-x;}
                    >
                    > --
                    >
                    > Walt
                    >
                    >
                    > "HappinessGrows" <webforumsuser@macromedia.com> wrote in message
                    > news:gbh1fa$5ks$1@forums.macromedia.com...
                    > > I've already added a top background image, and I want to add a bottom
                    > > image (i.e. www.fujinon.com). Athough I've searched and tried CSS
                    > > samples
                    > > of this, I'm still not getting it right.
                    >
                    >
                    >

                    >
                    > Thanks for your reply and CSS information. I placed the html as you
                    > suggested
                    > in my CSS along with changing the body portion to mirror what you
                    > indicated,
                    > and still don't have it right. The "bottom" image tiled as vertical places
                    > the
                    > image as a background on either side of the body of my webpage. What am I
                    > missing to place this image across the bottom?
                    >
                    >





                    Thanks for the link, though I have read about choosing CSS code as not to mix code for what I want to achieve, by not canceling out or having code override. I did add what you suggested in my CSS as:
                    html {
                    background-image: url(../Images/bottompage.jpg);
                    }

                    body {
                    background: url(../Images/background.jpg) repeat-x;
                    font-family: "Myriad Pro", Ventura, Arial, sans-serif;
                    font-size: 98%;
                    text-align: left;
                    margin: 0;
                    padding: 0;
                    vertical-align: top;
                    }

                    With adding the html my image is vertically in the background of my designated web page width. This is not what I want to achieve. I want the image to be across the bottom of the screen. (ie. www.fuginon.com and www.supercircuits.com). Maybe I'm missing what you're wanting to get across to me.
                    • 7. Re: Bottom background image
                      Level 7
                      >>ie. www.fuginon.com and www.supercircuits.com)

                      First link is invalid. 2nd has no background image at the page bottom.

                      > Thanks for the link, though I have read about choosing CSS code as not to
                      > mix
                      > code for what I want to achieve, by not canceling out or having code
                      > override.
                      Sorry, I have no idea what you mean or how any of that relates to the issue
                      at hand.

                      Regardless, try this:
                      html {
                      background-image: url(../Images/bottompage.jpg);
                      background-position:bottom;
                      }



                      --

                      Walt


                      "HappinessGrows" <webforumsuser@macromedia.com> wrote in message
                      news:gbj4v9$oua$1@forums.macromedia.com...
                      >
                      quote:

                      Originally posted by: Newsgroup User
                      > >>What am I
                      > >>missing to place this image across the bottom?
                      >
                      > You're missing an understanding of how to position the image. It's a bit
                      > complicated but once you grasp it you will have a very powerful tool in
                      > your
                      > web design arsenal. This is a good explanation:
                      > http://reference.sitepoint.com/css/background-position
                      >
                      > --
                      >
                      > Walt
                      >
                      >
                      > "HappinessGrows" <webforumsuser@macromedia.com> wrote in message
                      > news:gbiohv$a2h$1@forums.macromedia.com...
                      > >
                      quote:

                      Originally posted by: Newsgroup User
                      > > You can attach one background image to the html element and the second
                      > > to
                      > > the body element as demoed here:
                      > > http://www.designsbycharroncapri.com/temp-5.html
                      > > The vertical pattern image (tiled) is on the html. The horizontal image
                      > > (also tiled) is on the body. Here is the relevant CSS:
                      > > html{ background-image: url(images/bodyBack.png);}
                      > > body { background: url(images/headerBack.png) repeat-x;}
                      > >
                      > > --
                      > >
                      > > Walt
                      > >
                      > >
                      > > "HappinessGrows" <webforumsuser@macromedia.com> wrote in message
                      > > news:gbh1fa$5ks$1@forums.macromedia.com...
                      > > > I've already added a top background image, and I want to add a bottom
                      > > > image (i.e. www.fujinon.com). Athough I've searched and tried CSS
                      > > > samples
                      > > > of this, I'm still not getting it right.
                      > >
                      > >
                      > >

                      > >
                      > > Thanks for your reply and CSS information. I placed the html as you
                      > > suggested
                      > > in my CSS along with changing the body portion to mirror what you
                      > > indicated,
                      > > and still don't have it right. The "bottom" image tiled as vertical
                      > > places
                      > > the
                      > > image as a background on either side of the body of my webpage. What am
                      > > I
                      > > missing to place this image across the bottom?
                      > >
                      > >
                      >
                      >
                      >

                      >
                      > Thanks for the link, though I have read about choosing CSS code as not to
                      > mix
                      > code for what I want to achieve, by not canceling out or having code
                      > override.
                      > I did add what you suggested in my CSS as:
                      > html {
                      > background-image: url(../Images/bottompage.jpg);
                      > }
                      >
                      > body {
                      > background: url(../Images/background.jpg) repeat-x;
                      > font-family: "Myriad Pro", Ventura, Arial, sans-serif;
                      > font-size: 98%;
                      > text-align: left;
                      > margin: 0;
                      > padding: 0;
                      > vertical-align: top;
                      > }
                      >
                      > With adding the html my image is vertically in the background of my
                      > designated
                      > web page width. This is not what I want to achieve. I want the image to be
                      > across the bottom of the screen. (ie. www.fuginon.com and
                      > www.supercircuits.com). Maybe I'm missing what you're wanting to get
                      > across to
                      > me.
                      >


                      • 8. Re: Bottom background image
                        Josie815 Level 1
                        quote:

                        Originally posted by: Newsgroup User
                        >>ie. www.fuginon.com and www.supercircuits.com)

                        First link is invalid. 2nd has no background image at the page bottom.

                        > Thanks for the link, though I have read about choosing CSS code as not to
                        > mix
                        > code for what I want to achieve, by not canceling out or having code
                        > override.
                        Sorry, I have no idea what you mean or how any of that relates to the issue
                        at hand.

                        Regardless, try this:
                        html {
                        background-image: url(../Images/bottompage.jpg);
                        background-position:bottom;
                        }



                        --

                        Walt




                        Sorry, the 1st link was correct in my first post. The CSS code you've indicated may very well work, though it's not working when I give it a go.
                        • 9. Re: Bottom background image
                          Level 7
                          Upload your page and post a link.

                          --

                          Walt


                          "HappinessGrows" <webforumsuser@macromedia.com> wrote in message
                          news:gbjdrs$5vk$1@forums.macromedia.com...
                          >
                          quote:

                          Originally posted by: Newsgroup User
                          > >>ie. www.fuginon.com and www.supercircuits.com)
                          >
                          > First link is invalid. 2nd has no background image at the page bottom.
                          >
                          > > Thanks for the link, though I have read about choosing CSS code as not
                          > > to
                          > > mix
                          > > code for what I want to achieve, by not canceling out or having code
                          > > override.
                          > Sorry, I have no idea what you mean or how any of that relates to the
                          > issue
                          > at hand.
                          >
                          > Regardless, try this:
                          > html {
                          > background-image: url(../Images/bottompage.jpg);
                          > background-position:bottom;
                          > }
                          >
                          >
                          >
                          > --
                          >
                          > Walt
                          >
                          >

                          >
                          > Sorry, the 1st link was correct in my first post. The CSS code you've
                          > indicated may very well work, though it's not working when I give it a go.
                          >


                          • 10. Re: Bottom background image
                            Level 7
                            Hi.
                            If what you want is an image at bottom of the page add a new div and put it
                            out of your wrapper. Something like this:

                            #footer2 {
                            margin-top:30px; /*The top margin with your wrapper. Set as you want */
                            background-color:#1A7ED0;
                            border-top: 2px solid #000066; /* Set to 0 if you don´t want border */
                            width:100%; /* This fill the with of the page */
                            height:125px;
                            }

                            You can add more properties, like background-image, font-family ...

                            I think that this is what you are looking for.

                            "HappinessGrows" <webforumsuser@macromedia.com> escribió en el mensaje de
                            noticias news:gbh1fa$5ks$1@forums.macromedia.com...
                            > I've already added a top background image, and I want to add a bottom
                            > image (i.e. www.fujinon.com). Athough I've searched and tried CSS samples
                            > of this, I'm still not getting it right.

                            • 11. Re: Bottom background image
                              Level 7
                              I don't think so.

                              --

                              Walt


                              "Miguel" <nose@aunmenos.com> wrote in message
                              news:gbjgus$9ii$1@forums.macromedia.com...
                              > Hi.
                              > If what you want is an image at bottom of the page add a new div and put
                              > it out of your wrapper. Something like this:
                              >
                              > #footer2 {
                              > margin-top:30px; /*The top margin with your wrapper. Set as you want */
                              > background-color:#1A7ED0;
                              > border-top: 2px solid #000066; /* Set to 0 if you don´t want border */
                              > width:100%; /* This fill the with of the page */
                              > height:125px;
                              > }
                              >
                              > You can add more properties, like background-image, font-family ...
                              >
                              > I think that this is what you are looking for.
                              >
                              > "HappinessGrows" <webforumsuser@macromedia.com> escribió en el mensaje de
                              > noticias news:gbh1fa$5ks$1@forums.macromedia.com...
                              >> I've already added a top background image, and I want to add a bottom
                              >> image (i.e. www.fujinon.com). Athough I've searched and tried CSS samples
                              >> of this, I'm still not getting it right.
                              >


                              • 12. Re: Bottom background image
                                Level 7
                                Look at this page: http://www.pacificwindshield.com/
                                The van (top-right) is a background image of the #pagehead div which is
                                180px tall, 800px wide. The image (van) is positioned using this CSS:
                                #pagehead{
                                background: #F6FAFA url(images/mobileVan.png) 377px 50px no-repeat;}
                                This is CSS shorthand reading like this: >background-color is #F6FAFA >the
                                background uses an image located at images/mobileVan.png >it is positioned
                                377px from the left side (horizontal position is always first) and 50px from
                                the top >do not repeat this image.

                                Now this is not exactly what you want but it should shed some light on
                                positioning background images. The SitePoint link I agave you earlier tells
                                the whole story.

                                No one said this would be easy, at least no one with their head screwed on
                                straight. Positioning background images is particularly tricky, at least to
                                me, but that may be because I don't do it that often. Regardless, what you
                                want is achievable although still best if I could see the actual page.
                                --

                                Walt


                                "HappinessGrows" <webforumsuser@macromedia.com> wrote in message
                                news:gbjdrs$5vk$1@forums.macromedia.com...
                                >
                                quote:

                                Originally posted by: Newsgroup User
                                > >>ie. www.fuginon.com and www.supercircuits.com)
                                >
                                > First link is invalid. 2nd has no background image at the page bottom.
                                >
                                > > Thanks for the link, though I have read about choosing CSS code as not
                                > > to
                                > > mix
                                > > code for what I want to achieve, by not canceling out or having code
                                > > override.
                                > Sorry, I have no idea what you mean or how any of that relates to the
                                > issue
                                > at hand.
                                >
                                > Regardless, try this:
                                > html {
                                > background-image: url(../Images/bottompage.jpg);
                                > background-position:bottom;
                                > }
                                >
                                >
                                >
                                > --
                                >
                                > Walt
                                >
                                >

                                >
                                > Sorry, the 1st link was correct in my first post. The CSS code you've
                                > indicated may very well work, though it's not working when I give it a go.
                                >


                                • 13. Re: Bottom background image
                                  Josie815 Level 1
                                  quote:

                                  Originally posted by: Newsgroup User
                                  Look at this page: http://www.pacificwindshield.com/
                                  The van (top-right) is a background image of the #pagehead div which is
                                  180px tall, 800px wide. The image (van) is positioned using this CSS:
                                  #pagehead{
                                  background: #F6FAFA url(images/mobileVan.png) 377px 50px no-repeat;}
                                  This is CSS shorthand reading like this: >background-color is #F6FAFA >the
                                  background uses an image located at images/mobileVan.png >it is positioned
                                  377px from the left side (horizontal position is always first) and 50px from
                                  the top >do not repeat this image.

                                  Now this is not exactly what you want but it should shed some light on
                                  positioning background images. The SitePoint link I agave you earlier tells
                                  the whole story.

                                  No one said this would be easy, at least no one with their head screwed on
                                  straight. Positioning background images is particularly tricky, at least to
                                  me, but that may be because I don't do it that often. Regardless, what you
                                  want is achievable although still best if I could see the actual page.
                                  --

                                  Walt





                                  Thanks for the reply. I worked on this over the weekend and I found few errors on the page, and when I fixed them I retried placing the html and body background images and got them to work.

                                  Thanks again for your help.
                                  • 14. Re: Bottom background image
                                    Josie815 Level 1
                                    quote:

                                    Originally posted by: Newsgroup User
                                    Hi.
                                    If what you want is an image at bottom of the page add a new div and put it
                                    out of your wrapper. Something like this:

                                    #footer2 {
                                    margin-top:30px; /*The top margin with your wrapper. Set as you want */
                                    background-color:#1A7ED0;
                                    border-top: 2px solid #000066; /* Set to 0 if you don´t want border */
                                    width:100%; /* This fill the with of the page */
                                    height:125px;
                                    }

                                    You can add more properties, like background-image, font-family ...

                                    I think that this is what you are looking for.

                                    "HappinessGrows" <webforumsuser@macromedia.com> escribió en el mensaje de
                                    noticias news:gbh1fa$5ks$1@forums.macromedia.com...
                                    > I've already added a top background image, and I want to add a bottom
                                    > image (i.e. www.fujinon.com). Athough I've searched and tried CSS samples
                                    > of this, I'm still not getting it right.




                                    Thanks for chiming in and giving this option. I did try this on my webpage to see how it would work and what I found was when I resized the window height by dragging the corner, the image had a set height.

                                    Thanks again.
                                    • 15. Re: Bottom background image
                                      Level 7
                                      You're Welcome! Glad you got it working.

                                      --

                                      Walt


                                      "HappinessGrows" <webforumsuser@macromedia.com> wrote in message
                                      news:gbqkbq$8d3$1@forums.macromedia.com...
                                      >
                                      quote:

                                      Originally posted by: Newsgroup User
                                      > Look at this page: http://www.pacificwindshield.com/
                                      > The van (top-right) is a background image of the #pagehead div which is
                                      > 180px tall, 800px wide. The image (van) is positioned using this CSS:
                                      > #pagehead{
                                      > background: #F6FAFA url(images/mobileVan.png) 377px 50px no-repeat;}
                                      > This is CSS shorthand reading like this: >background-color is #F6FAFA
                                      > >the
                                      > background uses an image located at images/mobileVan.png >it is positioned
                                      > 377px from the left side (horizontal position is always first) and 50px
                                      > from
                                      > the top >do not repeat this image.
                                      >
                                      > Now this is not exactly what you want but it should shed some light on
                                      > positioning background images. The SitePoint link I agave you earlier
                                      > tells
                                      > the whole story.
                                      >
                                      > No one said this would be easy, at least no one with their head screwed on
                                      > straight. Positioning background images is particularly tricky, at least
                                      > to
                                      > me, but that may be because I don't do it that often. Regardless, what you
                                      > want is achievable although still best if I could see the actual page.
                                      > --
                                      >
                                      > Walt
                                      >
                                      >
                                      >

                                      >
                                      > Thanks for the reply. I worked on this over the weekend and I found few
                                      > errors
                                      > on the page, and when I fixed them I retried placing the html and body
                                      > background images and got them to work.
                                      >
                                      > Thanks again for your help.
                                      >