-
-
2. Re: bg for website
quality11 Jul 1, 2010 12:29 PM (in response to Linda Nicholls)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 Jul 1, 2010 12:50 PM (in response to quality11)Which wrapper? I'd need to see your HTML page to advise you about the best way to do this.
-
-
5. Re: bg for website
Linda Nicholls Jul 1, 2010 1:31 PM (in response to quality11)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 Jul 1, 2010 4:08 PM (in response to Linda Nicholls)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.
-
-
8. Re: bg for website
quality11 Jul 2, 2010 4:44 AM (in response to Linda Nicholls)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 Jul 2, 2010 6:18 AM (in response to quality11)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 Jul 2, 2010 7:49 AM (in response to Linda Nicholls)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 Jul 2, 2010 8:10 AM (in response to quality11)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 Jul 2, 2010 8:23 AM (in response to Linda Nicholls)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 Jul 2, 2010 8:26 AM (in response to quality11)Woops...sorry. That was due to a white line. What's showing is the bars going down....
-
14. Re: bg for website
Linda Nicholls Jul 2, 2010 2:21 PM (in response to quality11)The color chips are the lower two. The upper chips are for adjusting the opacity.
-
15. Re: bg for website
Linda Nicholls Jul 2, 2010 2:25 PM (in response to quality11)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 Jul 2, 2010 5:47 PM (in response to Linda Nicholls)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 Jul 2, 2010 6:53 PM (in response to quality11)Keep ar it. You'll get it and Fireworks will become your favorite video game. :-)

