Tiling Background

Discussion in 'Design and Graphics' started by fsck3r, Dec 30, 2006.

  1. macrumors newbie

    fsck3r

    Joined:
    Jan 22, 2005
    #1
    This is probably a newbie question but Im going to ask anyways. I want to make a tiling background with sideways stripe, anyone know what I mean? Is there a special way to making these backgrounds so where they line up correctly?

    TIA
    -Mick
     
  2. macrumors 68000

    dllavaneras

    Joined:
    Feb 12, 2005
    Location:
    Caracas, Venezuela
    #2
    Well, not exactly, I don't understand what you're after (sorry). Could you post a link to a site that has something similar?
     
  3. macrumors regular

    Joined:
    Dec 30, 2006
    #3
    Make a smaller section of the tile with the stripe you want, save for web, upload to your server and add the code with the proper repeat into your file. I assume you are wanting this to be a background, yes, like for a blog? Here's a link to the code to put in your css to repeat the tile:

    http://www.w3schools.com/css/pr_background-repeat.asp

    Good luck!
     
  4. thread starter macrumors newbie

    fsck3r

    Joined:
    Jan 22, 2005
    #4
    Thanks, I will give that a shot! Im pretty new to design and stuff like that. Just got a new iMac and PS CS3 and figured I would give it a shot!

    -Mick
     
  5. macrumors G3

    iMeowbot

    Joined:
    Aug 30, 2003
    #5
    There is some how-to material at tessellations.org if you need to learn how to make stuff that repeats cleanly.
     
  6. macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #6
    I haven't ever been able to get a background to repeat. I can't seem to figure it out. This is what I've got:

    Code:
    #footer {
    	background-image: url(images etc/bottomBar.png);
    	background-repeat: repeat-x;
    	position: absolute;
    	right: 0px;
    	bottom: 0px;
    	width: 100%;
    	height: 150px;
    }
    with accompanying div tags:
    Code:
    <div id="footer"></div>
    I've tried similar things (also repeat-y) and settings in other documents and with other images. Sometimes I'll get one instance of the image to show up and not tile, other times I can't even get the image to show at all.

    Am I missing something really obvious?
     
  7. macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #7
    most likely, without even asking, im going to suggest you clear your divs.

    insert:

    before your footer div.


    if it works, problem solved, if not. a little more 'splanin maybe?
     
  8. macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #8
    that didn't seem to do anything, what does clearing divs do?

    this is the website im redoing. www.visualcomm.com/site im trying to get that bottom gradient to go all the way across. take a look at the source if you don't mind.
     
  9. macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #9
    well since backgrounds need a height attribute, doing clear:both makes sure that any heights (which sometimes get set to 0 in certain divs, just the nature of layouts) do not make it into the footer.

    if it didnt work, maybe you need to give us more of your code.
     
  10. macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #10
    alright i fixed it, it was a combination of two things, so if i didnt fix them both at the same time it didnt actually fix it.

    the path was wrong, had an extra / in front, and then there was a space in the path instead of an underscore or no space. so it went from

    Code:
    #footer {
    	background-image: url(/images etc/bottomBar.png);
    	background-repeat: repeat-x;
    	position: absolute;
    	right: 0px;
    	bottom: 0px;
    	width: 100%;
    	height: 150px;
    }
    
    to:

    Code:
    #footer {
    	background-image: url(imagesetc/bottomBar.png);
    	background-repeat: repeat-x;
    	position: absolute;
    	left: 800px;
    	bottom: 0px;
    	width: 100%;
    	height: 150px;
    }
    
     
  11. macrumors newbie

    Joined:
    Jun 4, 2008
    #11
    tiled background

    here is the easiest and quickest way i know to create tiled background http://bgpatterns.com spend few minutes and you get what you need without photoshop and any tutorials
     
  12. macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #12
    this is an old thread, and the OP wasnt looking for backgrounds...
     

Share This Page