17 Replies Latest reply on Jul 2, 2010 6:53 PM by Linda Nicholls

    bg for website

    quality11 Level 1

      I got a webpage design from a graphic designer.  How do I take the bg from her webpage design and use it as a bg for the website?  I've tried slicing it but it, of course, doesn't look right b/c of the gradients and you can see all the divisions upon repeating the slice.  Another designer I worked with sent me a small file quickly for the same kind of thing but have no idea how she did it.  Does that make sense or do I ask her to send the bg file separately and if so, what do I ask for?


      Thanks so much in advance for your help!

        • 1. Re: bg for website
          Linda Nicholls Level 4

          Crop out a thin, horizontal slice and export it in JEPG format. Add it as a background imafe to your page in Dreamweaver, and tile it vertically.



          • 2. Re: bg for website
            quality11 Level 1

            The file I uploaded here was reduced quite a bit.  How do I match up the dimensions so that the white bg section matches up to the wrapper?

            • 3. Re: bg for website
              Linda Nicholls Level 4

              Which wrapper? I'd need to see your HTML page to advise you about the best way to do this.

              • 4. Re: bg for website
                quality11 Level 1

                Sorry, I meant the content portion of the page.

                Here's the page so far.

                • 5. Re: bg for website
                  Linda Nicholls Level 4

                  Just give the wrapper a white background. Make the left sidebar background green. Add a gradient background without the green left column and white content area to the HTML page.

                  • 6. Re: bg for website
                    quality11 Level 1

                    Right.  How though.  The files she sent go straight up and straight down so there's no slice w/o the green and white bg sections. I have a feeling I'm not understanding what you're saying.  The wrapper is white and sidebar green in the css right now.

                    • 7. Re: bg for website
                      Linda Nicholls Level 4

                      You have to create one of your own. It's simoly a rectangle with a gradient added to it. Download it and use it as a vertically tiled background in Dreamweaver.



                      • 8. Re: bg for website
                        quality11 Level 1

                        Thanks Linda.  I'm such a newbie at graphics.  So sorry for all the questions.


                        First, I'm not sure how you chose the right color.  Second, I don't know how to do a gradient. Third, here's your uploaded bg for testing.  Is this bg a good width to use for these kinds of body bg images in general?  Also, I didn't verticallly tile it (repeat-y) b/c it didn't look right.  I just:


                        background:#8BB39B url(../images/bg.jpg) repeat;


                        Correct?  Will there be any monitors where it cuts short and there's no bg image?


                        Thanks for all your help.

                        • 9. Re: bg for website
                          Linda Nicholls Level 4

                          Add the background to the body tag of your style sheet, like this


                          body {
                              background-image: url(background.jpg);
                              background-repeat: repeat-y;
                              background-position: center;


                          I like to make vertical background tiles about 2100 pixels wide by 30 pixels high.


                          Open a document that size in Fireworks and add a rectangle that spans the entire document window. To add a gradient to the rectangle, click on the Fill type drop down on the Properties panel and choose Gradient > Bars. Once you've done that, open the Gradient editor by clicking in the Fill color box on the Properties panel. You'll see a color ramp with two color chips. Click on the lighter of the two color chips to open the swatches panel. Use the color picker built into the swatches panel to select a light green color  Do the same with the second chip to add the darker green color. [Note that you can also sample the colors directly from your artists concept image by draging the color picken on top of the image] You'll find that by moving the color chips along the gradient ramp, you can adjust the placement of the two colors relative to each other. When you are satisfied the image looks the way you want it to, export in JPEG format and add it to your web page.


                          The background image will tile to the bottom of anyone's browser opening.

                          • 10. Re: bg for website
                            quality11 Level 1

                            Gosh, Linda.  Thanks so much.  That is sooo helpful!  I realized the reason my css wasn't working with repeat-y was b/c I had cut the size of the file way down and forgotten to center it. Woops.  I just tested it with your originally-sized jpg and my new one and it works.


                            Now, what's happening with the new css using your image and mine is the gradiant isn't showing enough on the sides of the site (mostly showing the dark part).  Not sure if that was what you were trying to explain toward the end of your post.  How do I play with the gradiant so that the light part shows closer to the middle for example?

                            • 11. Re: bg for website
                              Linda Nicholls Level 4

                              Open the gradient editor again, and move the two color chips closer to each other. You'll see the colors update live on your image.

                              • 12. Re: bg for website
                                quality11 Level 1

                                Uhh.....don't think I did that right.  I slid the "arrow" type of down pointing icons in. It ended up showing white lines in between each "slice".


                                Basically, it needs to go from dark to light from wrapper to bg on both sides...?  So from left to right: lighter darker containter/wrapper darker lighter.

                                • 13. Re: bg for website
                                  quality11 Level 1

                                  Woops...sorry. That was due to a white line. What's showing is the bars going down....

                                  • 14. Re: bg for website
                                    Linda Nicholls Level 4

                                    The color chips are the lower two. The upper chips are for adjusting the opacity.

                                    • 15. Re: bg for website
                                      Linda Nicholls Level 4

                                      You can change the direction of the gradient. When you click on the rectangle you see a black bar with a circle at one end and a square at the other. The circle is the rotation point of the gradient. The square is the handle you can use to rotate the gradient from vertical to horoizintal and vice versa.

                                      • 16. Re: bg for website
                                        quality11 Level 1

                                        I tried playing with it and don't get it but I'll keep playing.....


                                        Thank you Linda!

                                        • 17. Re: bg for website
                                          Linda Nicholls Level 4

                                          Keep ar it. You'll get it and Fireworks will become your favorite video game. :-)