SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    getting a diagonal stripe background to tile correctly

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,338
    Mentioned
    465 Post(s)
    Tagged
    8 Thread(s)
    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);

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,338
    Mentioned
    465 Post(s)
    Tagged
    8 Thread(s)
    Is there a certain size I need to make it?
    No.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ...
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Luki_be, I guess you're right. Is there an easy way to move a post? Congrats on your 400th post, btw.

  7. #7
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ktomasso View Post
    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
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I'll PM Paul to get him to move tihs thread (Luki didn't mention he did)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    I found this example on another forum that makes sense to me:

    The image needs to look like:
    Code:
          graphics|
    ics      graph|
    aphics      gr|
    So the left and right sides of the image need to be able to stack against each other.

  10. #10
    SitePoint Guru silver trophy JamesColin's Avatar
    Join Date
    May 2009
    Location
    Jomtien, Pattaya, Thailand
    Posts
    910
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Do you really need traffic? Where to? What for?
    If you really do need traffic then stop messing around!
    Advertise on my sites today: She Told Me & Best Reviewer :
    200,000+ UV / Month

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.
    Attached Images Attached Images

  12. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    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,


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •