Grow your CSS skills. Land your dream job.

How do i tile this pattern thingy?

  • # July 11, 2011 at 12:40 pm

    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!

    # July 11, 2011 at 12:43 pm

    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-

    # July 11, 2011 at 12:44 pm

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

    # July 11, 2011 at 12:46 pm

    Oh, also define the height of the image.

    # July 11, 2011 at 1:12 pm

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

    Thank you very much!

    # July 11, 2011 at 2:34 pm

    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; }
    # July 11, 2011 at 2:55 pm

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".