getting a diagonal stripe background to tile correctly

[ktomasso]

Seems like an easy thing to do, but I always struggle slicing up a diagonal striped bg image and having it tile seamlessly on a page. Is there a certain size I need to make it? Any quick tutorials you know about? I shouldn't be wasting so much time on such an easy thing.

The desired file is attached. Right now it's 40px x40px, but doesn't tile correctly.

[ralph.m]

Hi ktomasso. While the attachment is pending approval, are you sure it's a problem with the image or with the code used to tile it? It should look something like:

background: url(image path);

[ralph.m]

Is there a certain size I need to make it?

No.

[ktomasso]

No, I definitely do know how to add it to my code. The problem lies with me slicing it up at the correct size and ratio. I guess I wasn't very good at geometry, but I don't know how many stripes to include, and where on a line I should stop.

Ultimately I ended up using one of the stripe generators online, which worked this time. I still would like to know what I'm doing wrong, however. I'm sure it's a hard thing to answer on a forum, but when my attachment clears, maybe you'll see what the problem is.

[Luki_be]

If i understand you correctly, it's more an image technique problem and not so much a css problem? In that case you might wanna post your issue in the Graphics forum ...

[ktomasso]

Luki_be, I guess you're right. Is there an easy way to move a post? Congrats on your 400th post, btw.

[Luki_be]

Luki_be, I guess you're right. Is there an easy way to move a post? Congrats on your 400th post, btw.

One of the mods can move it for you. We humble being don't have that power

Tnx for the congrats ... i worked hard for it lol

[RyanReese]

I'll PM Paul to get him to move tihs thread (Luki didn't mention he did)

[markbrown4]

I found this example on another forum that makes sense to me:

The image needs to look like:

      graphics|
ics      graph|
aphics      gr|

So the left and right sides of the image need to be able to stack against each other.

[JamesColin]

I know I'm not answering your question which is interesting but I'm only giving you a website which I've found good for that purpose: http://www.stripegenerator.com

[Paul O'B]

Hi,

There is nothing special you need to do apart from making sure that your slice ends the pixel before the place where you started in both the horizontal and vertical.

The way I usually do it is to slice the square roughly, copy it a few times and then enlarge it in my graphics program. Place them side by side and just nudge them until the join is seamless. You can then trim as required.

Here is your image attached at the right size.

[markbrown4]

Your image needs to be 7x7 pixels.

It depends on the angle and space between the stripes as to the exact size.
But the top needs to be able to butt up against the bottom and the left to the right.

Hope it helps,