Tiling Background

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

  1. fsck3r
    Expand Collapse
    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. dllavaneras
    Expand Collapse
    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. twomiracles
    Expand Collapse
    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. fsck3r
    Expand Collapse
    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. iMeowbot
    Expand Collapse
    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. Muskie
    Expand Collapse
    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. Sdashiki
    Expand Collapse
    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. Muskie
    Expand Collapse
    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. Sdashiki
    Expand Collapse
    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. Muskie
    Expand Collapse
    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. sergii
    Expand Collapse
    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. Sdashiki
    Expand Collapse
    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