Greetings.
My blog is at http://www.hollisadoption.com.
I want to make the black at the top gradiate into the green. I made a gradient strip and uploaded it and modified this part of my style.css:
body {
padding: 0 0 2em 0;
margin: 0;
text-align: center;
font: 62.5% verdana, sans-serif;
background: #008000 url(images/top2.gif) repeat-x;
color: #333;
line-height: 150%;
}
Where top2.gif was the name of my 10 x 210 pixel gradient strip.
What happened was it gradiated from balck to green down the length of the whole page and not just the 200 or so pixels at the top.
Help? If that makes sense?
From W3 Schools website:
repeat-x
The background image will be repeated horizontally
repeat-y
The background image will be repeated vertically
Which one do you think you should be using? ;-)
Here is another interesting tutorial on using this technique with background images.
yes it make sense
background: #008000 url(images/top2.gif) <b> top </b> repeat-x;
Monika
melbell
Member
Posted 7 years ago #
It looks to me like your "gradient" image is just solid black
Lorelle, she's using repeat-x and she wants it to repeat horizontally...that bit looks fine to me.
melbell
Member
Posted 7 years ago #
sorry, I just read some of your site I think you are "he"
No, I changed it back to the black.
I'll try the -y and change it back to where it's messed up.
(I'm a he, BTW ;-) )
OK, I've got it "messed up" correctly now, LOL.
I want it to hit the green a lot sooner than it does.
melbell
Member
Posted 7 years ago #
repeat-y will make it repeat vertically (top to bottom) and I don't think that's what you want.
melbell
Member
Posted 7 years ago #
um wow. It does that because your image is HUGE
I created it though and made it 10 px wide by 210 px long.
melbell
Member
Posted 7 years ago #
LOL!
Thanks!
I feel stupid, but thanks!
Don't know how that happened.
melbell
Member
Posted 7 years ago #
Looks great now! I really like that effect!
Thanks!
Just kind of stumbling my way through this.
:-)
