PDA

View Full Version : Tiling Background




fsck3r
Dec 30, 2006, 09:18 PM
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



dllavaneras
Dec 30, 2006, 09:20 PM
Well, not exactly, I don't understand what you're after (sorry). Could you post a link to a site that has something similar?

twomiracles
Dec 30, 2006, 10:20 PM
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!

fsck3r
Dec 30, 2006, 10:50 PM
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

iMeowbot
Dec 31, 2006, 12:35 AM
There is some how-to material at tessellations.org (http://www.tessellations.org/) if you need to learn how to make stuff that repeats cleanly.

Muskie
Feb 15, 2007, 11:43 AM
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:

#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: <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?

Sdashiki
Feb 15, 2007, 12:54 PM
most likely, without even asking, im going to suggest you clear your divs.

insert:

<div style="clear:both"></div>


before your footer div.


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

Muskie
Feb 15, 2007, 12:59 PM
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?

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.

Sdashiki
Feb 15, 2007, 01:12 PM
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.

Muskie
Feb 15, 2007, 02:19 PM
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

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


to:

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

sergii
Jun 5, 2008, 01:12 AM
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

Sdashiki
Jun 5, 2008, 10:40 AM
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

this is an old thread, and the OP wasnt looking for backgrounds...