I need help keeping background images from tiling in webpages

Discussion in 'Web Design & Coding' started by Mr. Ass, Aug 10, 2003.

  1. Mr. Ass

    Mr. Ass Guest

    Alright the title basically describes it... The background image im dealing with is attached to this thread. I want to keep it from tiling because it just wont look right (since i want to keep the red at the top of the page only)... This was the closest solution i could find but it didnt work because the background image i have will be within a table only.

    Code:
    <STYLE TYPE="text/css">
    
    <!--
    
    BODY { background-image: url(myimage.jpg) }
    
    BODY { background-repeat: no-repeat }
    
    BODY { background-position: center }
    
    -->
    
    </STYLE>
    
     
  2. lechtard

    lechtard Guest

    I think tiling is the default feature for the backgrounds .. in order to keep it from doing it you could try this:
    • make a layer - put the top part as the background and ajust it to wear you want it at
    • Make another layer and put the rest in the background of that one ....
    I had a simular prob with dreamweaver and that was the only way I could fix it ..

    I hope you figure it out ..
     
  3. scriptasylum

    scriptasylum Moderator

    Messages:
    832
    Location:
    Des Moines,IA
    I assume by your attached pic that you'd like to tile it horizontally, but not vertically, right? If so, use the following style:

    BODY {
    background-image: url(myimage.jpg);
    background-repeat: repeat-x;
    background-color: black;
    }

    Then, you can trim that image down really small so it won't take so long to download for those with slow connections. The image will tile right to left, but not down. Since the lower part of your image is black, setting the background color to black will blend in with the image. I've attached the new smaller image too.

    Edit: Oh yeah, almost forgot: This may or may not work well in the older Netscape 4.x browsers (but fine in versions 6 and up). If that's an issue, you'll have to do something a bit more exotic.
     
  4. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
  5. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    Since it's supposed to be a background to a table and not to the BODY tag I suggest you apply the CSS to the TABLE tag instead.
    Code:
    TABLE {
    background-image: url(myimage.jpg);
    background-repeat: repeat-x;
    background-color: black;
    }
    Or better yet, a specific TABLE tag, since you might want tables without the background. ;)
    Code:
    TABLE.withbackround {
    background-image: url(myimage.jpg);
    background-repeat: repeat-x;
    background-color: black;
    }
     
  6. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    zedric's answer is the one i would give.