8 Replies Latest reply on Aug 15, 2008 11:07 AM by ed19

    cropping for background image

    ed19 Level 1
      Hello,

      Since I can't make my canvass have a gradient color in FW CS3, I am trying to do it with 2 layers. In layer 1, I have a long rectangle with a grey gradient. In layer 2, I have a small rounded purple rectangle. I am trying to have layer 1 which is in the back of layer 2 be cut in the same shape as layer 2 except that the rounded edges to be squared of so that when I place it in my banner homepage you won't be able to see layer 1 because I am matching it with my homepage bg. So I guess I am trying to get layer 1 to be smaller, but when ever I crop it, it looses its gradient.

      thanks
        • 1. Re: cropping for background image
          pixlor Level 4
          Try a slice, rather than a crop.

          That's the funny green rectangle tool. It activates the Web layer. Name your slice with the name you want your image, and set the out put format in the Properties panel. Then, when you export your image, just export the slices.

          • 2. Re: cropping for background image
            ed19 Level 1
            Hi,

            I tried the slice, I sliced the top, then went to move to the other 3 sides and it would take away my layer 1 and make it all white.

            So I used crop > export crop and made my rectangle shape around both layer 1 and layer 2 then right click and export as jpg. This allowed me to save that piece as its own file which worked out.

            However, now when I put those in my webpage div's they don't work right. I have 2 divs inside a main div. The 2 divs each only 20 pixles wide are floating right and left with background images. The main div also has a background image. Webpage looks fine in FireFox where the 3 images are flush and seem like one contiuous image. (This is for my banner at top of page with rounded sides) But in IE you can see a little gap between the
            left | main | right div backgrounds ! Any light you can shine on this issue ?

            • 3. Re: cropping for background image
              Level 7
              A link to the image/s, may help us to understand better, it nearly always
              does :-)

              Peter
              __________________
              "ed19" <webforumsuser@macromedia.com> wrote in message
              news:g7uq8f$drm$1@forums.macromedia.com...
              | Hi,
              |
              | I tried the slice, I sliced the top, then went to move to the other 3
              sides
              | and it would take away my layer 1 and make it all white.
              |
              | So I used crop > export crop and made my rectangle shape around both layer
              1
              | and layer 2 then right click and export as jpg. This allowed me to save
              that
              | piece as its own file which worked out.
              |
              | However, now when I put those in my webpage div's they don't work right.
              I
              | have 2 divs inside a main div. The 2 divs each only 20 pixles wide are
              | floating right and left with background images. The main div also has a
              | background image. Webpage looks fine in FireFox where the 3 images are
              flush
              | and seem like one contiuous image. (This is for my banner at top of page
              with
              | rounded sides) But in IE you can see a little gap between the
              | left | main | right div backgrounds ! Any light you can shine on this
              issue
              | ?


              • 4. Re: cropping for background image
                ed19 Level 1
                I don't have the page live, it is local? Is there something else that can help, I can paste the code later today; but do you know of anything that would cause this difference from FireFox to IE?
                • 5. Re: cropping for background image
                  pixlor Level 4
                  Can you take screen shots post them somewhere for comparison?

                  In the meantime, do I understand you correctly: you have a container div and then two button divs inside it? Your problem is that the tiny bit of background image on your buttons isn't lining up properly with your overall background image in IE although it looks fine in Firefox?

                  If so, then I am not surprised. IE and Firefox implement some things differently and lining up images on a background is not easy to do. (I think it's so annoyingly difficult that only super CSS gurus even attempt it.) Different browsers implement the HTML and CSS standards differently, so what you think ought to be very simple isn't always.
                  • 6. Re: cropping for background image
                    ed19 Level 1
                    Lorraine

                    I can sure try to take screen shots and post them, Unfortunately I can't have them up until 10 hours from now.

                    I'll try this without having a screen shot.

                    I have a banner on the top of the page that is 120 height, 1000 width we will call this div1.
                    Then I have div 2 as 120 height, 20 width and it is float left inside div1.
                    Then I have div 3 as 120 height, 20 width and it is float right inside div1.

                    The background images:
                    Div1 is 120 height 10 width shaped as a rectangle and setup in div 1 as x repeat. (so it repeats itseft)
                    Div2 is 120 height 10 width shaped as a half rounded rectangle and setup in div 2 with no repeat.
                    Div3 is 120 height 10 width shaped as a half rounded rectangle and setup in div 3 with no repeat.

                    Goal is to have a banner with rounded edges at the ends. I could make one giant banner that would just be the easiest way, but I thought it would help the page load time, what do you think ? It all looks fine in FF as the 3 divs sit flush next to each other. In IE they don't sit flush side by side, instead there is a tiny grey matter space between the 3 divs (like a spacer or something)

                    I guess it might be an issue with 2 overlapping divs having a background each maybe.

                    I hope that explains it a bit more clearly,
                    again thanks..
                    ed
                    • 7. Re: cropping for background image
                      pixlor Level 4
                      quote:

                      Originally posted by: ed19
                      I have a banner on the top of the page that is 120 height, 1000 width we will call this div1.
                      Then I have div 2 as 120 height, 20 width and it is float left inside div1.
                      Then I have div 3 as 120 height, 20 width and it is float right inside div1.

                      The background images:
                      Div1 is 120 height 10 width shaped as a rectangle and setup in div 1 as x repeat. (so it repeats itseft)
                      Div2 is 120 height 10 width shaped as a half rounded rectangle and setup in div 2 with no repeat.
                      Div3 is 120 height 10 width shaped as a half rounded rectangle and setup in div 3 with no repeat.

                      Goal is to have a banner with rounded edges at the ends. I could make one giant banner that would just be the easiest way, but I thought it would help the page load time, what do you think ? It all looks fine in FF as the 3 divs sit flush next to each other. In IE they don't sit flush side by side, instead there is a tiny grey matter space between the 3 divs (like a spacer or something)

                      I guess it might be an issue with 2 overlapping divs having a background each maybe.
                      ed


                      Ah...I get ya.

                      Well, IE and Firefox handle the box model differently, so do you have 0 margins and padding on your divs? Other than that, I think you need a CSS expert, and I'm not one.

                      Call me a Luddite, but I'd put that header in a table and go to bed with all my hair.
                      • 8. Re: cropping for background image
                        ed19 Level 1
                        Thank you Lorraine for all your help,

                        I think what I will just do is make one div and make a full size banner to put in as the bg image, that'll be simpler.


                        Ed