Tiling Background

fsck3r · Dec 30, 2006

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

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

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

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 30, 2006

There is some how-to material at tessellations.org if you need to learn how to make stuff that repeats cleanly.

Muskie · Feb 15, 2007

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?

Sdashiki · Feb 15, 2007

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

Sdashiki said:
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. http://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

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

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;
}

sergii · Jun 4, 2008

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

Sdashiki · Jun 5, 2008

sergii said:
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...

Search

Search

Tiling Background

fsck3r

macrumors newbie

dllavaneras

macrumors 68000

twomiracles

macrumors regular

fsck3r

macrumors newbie

iMeowbot

macrumors G3

Muskie

macrumors 6502

Sdashiki

macrumors 68040

Muskie

macrumors 6502

Sdashiki

macrumors 68040

Muskie

macrumors 6502

sergii

macrumors newbie

Sdashiki

macrumors 68040

Our Staff