CSS background colors

Discussion in 'Web Design and Development' started by mactib, Jul 30, 2006.

  1. mactib macrumors member

    mactib

    Joined:
    Jul 21, 2006
    #1
    Guys,
    I am working on this website of mine and so..in the css coding i put in:

    body {
    background-color: #FFFFFF
    }

    OK. so is there anyway I will be able to put in a gradient in the background coloring or....do I have to put the gradient coloring as an image file?

    Thanks,
     
  2. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #2
    For gradient you need to use an image file...

    Best for a straight gradient is to use a one pixel wide (or high) image file much higher (or wider) than an average window and then repeat that...

    PHP:
    body {
    background#FFF url(vertical-line.gif) repeat-x scroll center!important;
    }
    or
    PHP:
    body {
    background#FFF url(horisontal-line.gif) repeat-y scroll center!important;
    }
     
  3. khaos34 macrumors newbie

    Joined:
    Jul 28, 2006
    #3
    I just want to make a suggestion re: the one pixel high (or wide) image - although the image will be small, it's better to make the image just a little bit wider (or taller) - maybe 10 - 20 pixels. The browser takes longer to try and pattern 1000 images across the screen than 100 or 50, and the gain on image size is very minimal.
     
  4. mactib thread starter macrumors member

    mactib

    Joined:
    Jul 21, 2006
    #4
    well I tried putting in an image file but the texture is not smooth at all. the whole body looks like its a repetition of the image file. So what should I do to smoothen them? And I am using Dreamweaver 8
     
  5. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #5
    I think we need to see the image you're using and/or the site where you've tried it... :)
     
  6. kaboutertje macrumors regular

    kaboutertje

    Joined:
    Jul 7, 2006
    Location:
    Amsterdam, Netherlands
    #6
    You probably made a real background image, instead of a color. If you want a pattern you need to design it keeping in mind that it has to look good if it's surrounded by the same images.
    It's hard to explain but otherwise it looks crap (think that's what happened with your background right now). Cause there is no way a 1 pixel background in the same color can not look 'smooth'.

    But post a link it's easier
     
  7. mactib thread starter macrumors member

    mactib

    Joined:
    Jul 21, 2006
    #7
    I think I saved it as a real background image.
    1) I made it in Illustrator CS2
    2) Then saved it for the web.
    3) Saved as .gif file.
    4) loaded as background image file.
    5) repeat-x
    and the end result is really bad.

    So, what should I do?
     
  8. khaos34 macrumors newbie

    Joined:
    Jul 28, 2006
    #8
    I think that we would have to see the image to know exactly what you're talking about, as Mitthrawnuruodo has suggested :) Can you post it?
     
  9. mactib thread starter macrumors member

    mactib

    Joined:
    Jul 21, 2006
    #9
    here it is. well you barely see it..
     

    Attached Files:

    • sdf.jpg
      sdf.jpg
      File size:
      1.1 KB
      Views:
      31
  10. mactib thread starter macrumors member

    mactib

    Joined:
    Jul 21, 2006
    #10
    another one
     

    Attached Files:

    • t.gif
      t.gif
      File size:
      2.3 KB
      Views:
      28
  11. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #11
    The attached image here is a jpg, and I think you'll get better result with a gif...

    Now, if I just try out this code

    PHP:
    <html>
    <
    head></head>
    <
    body style="background: #fee url(sdf.jpg);">
    <
    p>Hallo</p>
    </
    body>
    </
    html>
    I get it working, but the gradient doesn't seem very smooth...
     

    Attached Files:

  12. mactib thread starter macrumors member

    mactib

    Joined:
    Jul 21, 2006
    #12
    That was the exact thing that was happening to me:confused:
     
  13. Mitthrawnuruodo Moderator emeritus

    Mitthrawnuruodo

    Joined:
    Mar 10, 2004
    Location:
    Bergen, Norway
    #13
    Now I just made a simple background in Photoshop, 20 x 1000 px, and used the gradient tool with some random green to white. Then used the "Save for the web" and saved it as a gif with 256 selective colours. That's this file:

    dill.gif

    Then, when I use the same code as above the background gets fairly smooth:

    Picture 2.png
     
  14. mactib thread starter macrumors member

    mactib

    Joined:
    Jul 21, 2006

Share This Page