1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: html+ background+css

Discussion in 'Web Design & Development' started by timothye, Mar 31, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. timothye

    timothye Thread Starter

    Joined:
    Nov 19, 2004
    Messages:
    743
    HI .
    i am trying to achieve a gradient background that repeats its self , im not sure what the technique is called so ill post a picture of what i am trying to do here ..
    see pic
    http://img219.imageshack.us/my.php?image=backgroundhv0.jpg

    on the left side you see i have a black to white gradient starting from the body / content area and going out to the edge of the browser , i want this to be exactly the same on the otherside as well .
    the file i have now is
    2000px X 10px
    and i have a bit of code i am using here .

    [Code[
    background-image:url(images/background.png);
    background-repeat:repeat-y;
    [/code]

    anyone ahve an idea how to create this effect .this is my first time trying this and i cannot get it to work correctly .

    Cheers T

    this is exactly what i am tryign to achieve
     
  2. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Are you looking for something like the attached screenshot?

    Peace...
     

    Attached Files:

  3. timothye

    timothye Thread Starter

    Joined:
    Nov 19, 2004
    Messages:
    743
    Solved ..

    i have a body area ( white ) in the html which is 800px wide ..
    so i made a background image 2000px X 10px
    lined it up so i would have 2 gradients , 1 on the left and 1 on right with the center of the image 800px ( white )

    so it loks like this <----gradient ----| white 800px |----gradient----> remember this is 2000px wide and 10px high ..


    then in the css .
    background-image:url ( images/bg.png) repeat-y;
    background-position:center;

    once i centered the image it works how i wanted it to ..

    hope this helps someone else trying to achieve this effect !!

    Cheers T
     
  4. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Ok, then what I did wasn't what you wanted since you wanted the same "direction" of gradient on both sides of the centered content, right? What I created had the gradient in opposite directions on either side of the content. By "direction" I mean as the gradient goes from dark to light , either from left to right or right to left.

    Glad you got it worked out! :)

    Peace...
     
  5. timothye

    timothye Thread Starter

    Joined:
    Nov 19, 2004
    Messages:
    743
    your pic is exactly what i wanted ..
    but i figured it out ..

    read my last post again ..:)

    Cheers T
     
  6. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    So, the gradient image you created went from light to dark to light again?

    Peace...
     
  7. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/699024

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice