#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Posts
    11
    Rep Power
    0

    background image


    I have managed to create a collage that I want to use as a background image on my web site, the only problem is it tiles because it is smaller than the window size. Is there a way to stop it from tiling and just remain in the middle of the page. I'm a novice at this web page thing so I have no clue. Please help!
    thanks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2002
    Location
    atlanta,ga
    Posts
    255
    Rep Power
    24
    You can use a table with the dimensions of your image and use background="yourimage.jpg"

    or you can use style sheets

    Mantas
  4. #3
  5. Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Apr 2000
    Posts
    1,058
    Rep Power
    22
    Another approach that may work depending on the image size, page content, and a few other factors, would be to increase the image size so that it doesn't repeat. This won't work at all if your image is relatively small, but can be decent cross-browser compatible way to go under certain circumstances.

    For example, at one place I worked they wanted to use the background image to place a sort of graphical hearder at the top of the page. The image was about 800X150. As it was it titled vertically down the page, and horizontally if the res was higher that 800x600. What we ended up doing was adding white space to the right-side and bottom so that the image was 1200X3600. Now this may sound huge, but once it was turned into a .gif the file size was very manageable (was under 10k if I recall correctly).

    The only thing we really needed to be careful of was making a page longer than 3600 pixels vertically, which wasn't a huge problem because our guidelines for page construction stipulated that 66% or more of the content should be "above the fold" on 800X600 display.

    wdn2k
  6. #4
  7. No Profile Picture
    Polymath
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2002
    Location
    Indiana
    Posts
    20
    Rep Power
    0
    I recommend stylesheets. You can use this:

    <body style="background-image:url(image.jpg); background-repeat: no-repeat; background-position: center center;">

    If you'd like you can add

    background-attachment: fixed;

    to the list of properties between the quotes above and your background image won't scroll with the rest of your page.

    Be careful, though. Stylesheets, though they have been around for quite a while, are implemented differently in different browsers, especially older ones. Some style properties may not work exactly like you want them to.

    Good Luck!

IMN logo majestic logo threadwatch logo seochat tools logo