WordPress.org

Ready to get started?Download WordPress

Forums

Top header gradient help (14 posts)

  1. Fenris
    Member
    Posted 9 years ago #

    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?

  2. Lorelle
    Member
    Posted 9 years ago #

    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.

  3. Monika
    Member
    Posted 9 years ago #

    yes it make sense

    background: #008000 url(images/top2.gif) <b> top </b> repeat-x;

    Monika

  4. melbell
    Member
    Posted 9 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.

  5. melbell
    Member
    Posted 9 years ago #

    sorry, I just read some of your site I think you are "he"

  6. Fenris
    Member
    Posted 9 years ago #

    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 ;-) )

  7. Fenris
    Member
    Posted 9 years ago #

    OK, I've got it "messed up" correctly now, LOL.

    I want it to hit the green a lot sooner than it does.

  8. melbell
    Member
    Posted 9 years ago #

    repeat-y will make it repeat vertically (top to bottom) and I don't think that's what you want.

  9. melbell
    Member
    Posted 9 years ago #

    um wow. It does that because your image is HUGE

  10. Fenris
    Member
    Posted 9 years ago #

    I created it though and made it 10 px wide by 210 px long.

  11. melbell
    Member
    Posted 9 years ago #

  12. Fenris
    Member
    Posted 9 years ago #

    LOL!

    Thanks!

    I feel stupid, but thanks!

    Don't know how that happened.

  13. melbell
    Member
    Posted 9 years ago #

    Looks great now! I really like that effect!

  14. Fenris
    Member
    Posted 9 years ago #

    Thanks!

    Just kind of stumbling my way through this.
    :-)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags