How do i tile this pattern thingy?

[antonio_89]

Hey peeps!

I know this is really basic stuff, but im strugling with it for some reason!

How do i go about achieving this effect in css:

http://img189.imageshack.us/img189/5053/queryj.jpg

Any help would be very much appreciated!

Cheers!

[stevendeeds]

ahh. easy enough. okay, so you’re going to want to define that top part as a div

so in this case, we will say its div class of teethything

it’ll look like this:

HTML:

CSS:

/* Make sure you use a css reset before you begin coding anything */

.teethything { background: url(imageofyourpattern.jpg) repeat-x; width: 100%; }

Simple as pie!

Hope that helps!

-All Good Things-

[stevendeeds]

Also worth mentioning, make sure that section isn’t wrapped in another div that’s like 960px wide or something!

[stevendeeds]

Oh, also define the height of the image.

[antonio_89]

Sweet! It works like a treat! I can’t believe i didnt think of this.

Thank you very much!

[TheDoc]

Not sure why you would be defining the height or width of the image…

I would be putting that pattern on the body, myself. I would create a transparent png with only the red ridges and I would create another beige background with your texture on it and put it on the html.

I’d make sure the beige texture background fades out to a simple page color near the bottom, add that in to #color seen below.

html { background: url('path/to/beige-texture.jpg') repeat-x #color; }



body { background: url('path/to/red-ridges.png') repeat-x; }

[stevendeeds]

@thedoc I chose that way, cuz he has a similar effect at the bottom, and he’d need to know how to do that as well. What you have is definitely acceptable if those were the only two elements with 100% width. Also, hopefully, @antonio_89 has his beige texture background repeatable, so he won’t have to fade to a color. haha. Oh! and I probably should have been more clear, I meant that the .teethything div height should be the height of the image. If you don’t define a height, it’ll be nothin of course! I think @antonio_89 knew what I meant. Haha.

Good luck on your quest @antonio_89!

-All Good Things-

[Author]

Posts