How to create horizonally repeating backgrounds

Discussion in 'HTML & Website Design' started by ninehigh, Nov 29, 2007.

  1. #1
    I am wondering how to optimally implement a background/gradient for a website. I'm using dreamweaver.

    and example of a horizontal wallpaper that I would like to use would be similar to the background of:
    http://www.cavan.net/about.php

    I would like to achieve this by creating a small, repeating, file, as opposed to creating a large single image in photoshop.

    Also, I would like to know how people do gradients for backgrounds without them being large files for backgrounds.

    Thanks for your help!
     
    ninehigh, Nov 29, 2007 IP
  2. Saulie

    Saulie Peon

    Messages:
    37
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    If you would like it to repeat horizontally then just reduce the background width to 1px and enter this bit of css.

    body {
    background: url('images/background.jpg') repeat-x;
    }

    Hope that helps.
    Thanks, Saulie.
     
    Saulie, Nov 29, 2007 IP
  3. veckd

    veckd Peon

    Messages:
    1,065
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #3
    are you familiar with photoshop?
    If so, just create a file with the height of the gradient you want. Then choose the colors you want to make the gradient. Create a gradient that almost fills up the whole canvas. Then use the marquee tool to make a selection that is the height of the canvas but one pixel wide. then open up a new document (in photoshop). By default it should be 1px x the height of your gradient because it is in your clipboard. Save that file as an image. And use the code that Saulie posted ;)

    That was kind of hard to explain, I'll see if I can find a tutorial.

    EDIT: I found one here: http://www.tizag.com/cssT/background.php
    its near the bottom of the page.
     
    veckd, Nov 29, 2007 IP
  4. ninehigh

    ninehigh Active Member

    Messages:
    395
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    60
    #4
    Excellent. Thanks for the help guys!
     
    ninehigh, Nov 29, 2007 IP
  5. veckd

    veckd Peon

    Messages:
    1,065
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #5
    no problem ;)
     
    veckd, Nov 30, 2007 IP