Tiling Background

[fsck3r]

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]

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]

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]

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]

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

 

[Muskie]

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]

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]

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]

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]

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]

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]

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...