Multiple background repeat position CSS

Discussion in 'CSS' started by Silver89, Apr 4, 2011.

  1. #1
    If I have one div with two background gradients:

    
    #box {
    height:100px;
    width:100px;
    background: -webkit-gradient(linear, left top, left bottom, from(#9BCBE8), to(#CDE7F5)),  -webkit-gradient(linear, left top, left bottom, from(#A5D1EB), to(#CDE7F5));
    background-position: 44px 0px, 0 0;
    }
    
    Code (markup):
    Is there anyway I can get them to alternately repeat with css?

    If not is there a way to position a background every 44px so it leaves gaps inbetween?

    End result would be similar to the following concept..:

    [​IMG]
     
    Silver89, Apr 4, 2011 IP
  2. ApocalypseXL

    ApocalypseXL Notable Member

    Messages:
    6,095
    Likes Received:
    103
    Best Answers:
    5
    Trophy Points:
    240
    #2
    Not AFAIK . The solution is to just use a big fat graphic and then use that .
     
    ApocalypseXL, Apr 5, 2011 IP
  3. extremike

    extremike Peon

    Messages:
    44
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Why not just create a background image with the two colour strips and repeat-x? This does mean creating an image rather than just using CSS but is surely simpler? Don't think there's a way to alternately space the background repeat in CSS.
     
    extremike, Apr 5, 2011 IP
  4. Brunzig

    Brunzig Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thats the best idea use i big images
     
    Brunzig, Apr 5, 2011 IP
  5. ApocalypseXL

    ApocalypseXL Notable Member

    Messages:
    6,095
    Likes Received:
    103
    Best Answers:
    5
    Trophy Points:
    240
    #5
    Are you kidding , a small image with horizontal repeat is the way to go . A big image only serves the ISP and your competition .
     
    ApocalypseXL, Apr 5, 2011 IP
  6. sd3189541

    sd3189541 Peon

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    what is the use of webkit-gradient?
     
    sd3189541, Apr 6, 2011 IP