1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Gradient Background with Stripes

Discussion in 'CSS' started by Hades, Feb 17, 2008.

0
Page 1 of 2
  1. #1
    What is the best method for making a gradient background that has stripes in CSS?

    I was thinking about setting the body to have the gradient as it's background, and then make a wrapping div around the content that would have the stripes repeat indefinately.

    Is there a better way to do this?

    Thanks,
    Nick
     
    Hades, Feb 17, 2008 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Putting the gradient on the container would be one way. Not uisng a DIV container to hold the entire site would be another. Either way though you're going to want to make sure the image repeats either horzontally or vertically, depending on how the image looks. If you can pull it off, you can seamlessly tile the image but you need to get the image just right in order to do that.
     
    Dan Schulz, Feb 17, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Heh yup. I just saw someone on here posting a site and they had the stripes and they tiled perfectly. You have to set the height and width just right, depending on the angle and thickness of your stripes. You could check out the site with the stripes... it was a media site on a thread I replied to... I myself have played with them a bit and gave up. When you don't get it just right it looks like crapola.
     
    Stomme poes, Feb 18, 2008 IP
  4. CaffinePhil

    CaffinePhil Banned

    Messages:
    945
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I use this site, very handy indeed - stripegenerator.com

    Is this the sort of thing you were looking for?
     
    CaffinePhil, Feb 18, 2008 IP
  5. Hades

    Hades Well-Known Member

    Messages:
    1,873
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    150
    #5
    Both of you misunderstood me. I am not trying to make stripes. I am trying to code it so that they show up with a gradient background and do it while optimizing the code for whatever. :p

    Yeah, Ijust ended up using a DIV container for a whole wrapper around my site with the stripes. Oh well lol.

    Thanks,
    Nick
     
    Hades, Feb 19, 2008 IP
  6. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #6
    stripemania IMO is better than stripegenerator.
     
    blueparukia, Feb 19, 2008 IP
  7. SitPoMk

    SitPoMk Peon

    Messages:
    457
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #7
    i prefer doing it manually, as with most things

    just imagine having a little specified tool for every little specified task you perform for a site! i would go insane

    What i do is just make in PS, save it as a single pixel strip image and repeat it in a div as a background

    Consider doing it manually
     
    SitPoMk, Feb 19, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Ahhhh oooh a colour change gradient between the stripes? Oops.
     
    Stomme poes, Feb 20, 2008 IP
  9. designexpert

    designexpert Guest

    Messages:
    196
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #9
    wow, i dont believe you find that hard, its actually pretty easy...

    photoshop, that is....

    DO NOT CREATE THE GRADIENT AND THE LINE PATTERN SEPARATELY....

    place the gradient, on top of that place the line fill pattern overlay

    create a new slice, with the width set to the crest of the lines on x-axis [as in the slice starting from a point on left side of say line l1, and ending at the same spot before line l2]

    now streatch the slice all the way down to the size of the gradient.....

    save the slice for web format....

    NOW FOR THE CODING:
    make it the background image to repeat on x-axis ...

    WHOA!! there you have your lines over a gradient background :)
     
    designexpert, Feb 22, 2008 IP
  10. Hades

    Hades Well-Known Member

    Messages:
    1,873
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    150
    #10
    Yeah..thanks, I don't want it to look like shit. This isa whole background image, that has to go as far as the content goes, there for it is a must for it to be able to go as far as possible. Let's say there is 10,000px worth of content, that needs to go down to 10,000px and more. So don't post stupid things, kthnxby.

    If you are so sure your method works, why don't you do it, and post it up, k? Until then, please actually read the previous posts in the thread, and understand that it has already been done.

    Thank You,
    Nick

     
    Hades, Feb 22, 2008 IP
  11. designexpert

    designexpert Guest

    Messages:
    196
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #11
    by the way your the one asking for help, so please dont f**&&% give me shit

    I have tried my method, i know it works [use javascript for addittional help in stretching the gradient to body height] and my method is definately less than how shitty yours would look....

    Your Welcome,
    Dex
     
    designexpert, Feb 22, 2008 IP
  12. SitPoMk

    SitPoMk Peon

    Messages:
    457
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #12
    wow .. dude show some respect atleast to someone trying to help you
    not even to mention that he actually has a very valid solution
     
    SitPoMk, Feb 22, 2008 IP
  13. Hades

    Hades Well-Known Member

    Messages:
    1,873
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    150
    #13
    Cause you know how every single person in the world has javascript turned on, don't you? :p I won't say anything more.

    The way I did my way is:

    CSS:
body { background: #XXX url(images/gradient.gif) repeat-x; }

#wrapper { background: url(images/stripes.gif) repeat; }

HTML:

<html>
<head></head>
<body>
<div id="wrapper">
   MY SITE GOES HERE
</div>
</body>
</html>
    Code (markup):
    Now, I am sure that this is much less code than what you have, and it definately looks perfect, cause I've done it.

    Here is another problem with your way of doing it.

    When you design the stripes, they have to be a certain width x height to repeat correctly. Mine had to be 15px by 15px. Now that means your gradient image that you have to stretch is going to be 15px width at least, and then whatever the length of it is STRETCHED. Now, I am no expert on images, but please tell me how you would save an image like that while still having it at a small enough size so that the page doesn't take a year to load?

    My gradient was only 1px in width, and my striped image was a transparent one of 15px by 15px.

    I thank you for attempting to help me, but I am sorry, your solution was not good enough. Plus, next time you try to help someone, try sounding nicer, eh? It might actually seem that you are trying to help someone, instead of seeming as though you are trying to show off, or put someone else down.

    Thanks

    I would consider it if it was a valid solution, and if when he suggested it, he would actually say it nicely, instead of being a jackass about it, as if I am a total newbie. His method of creating a gradient image with a stripes image on top of it all in one, would mean that, after the certain height, that gradient will repeat. Now tell me, how shitty would that look? It worked for him because he has never had a lot of content on a site at one time. His method of using javascript is invalidated by the fact that some people have java turned off.

    Thanks,
    Nick
     
    Hades, Feb 23, 2008 IP
  14. designexpert

    designexpert Guest

    Messages:
    196
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #14
    what i gave you is my suggestion, it was an open thread , you are asking people for help, if it doesnt work with you, its fine... say thanks and stay shut....

    do not open a thread asking for help and then arguing with people about how incorrect their techniques are ....
     
    designexpert, Feb 23, 2008 IP
    Loonm likes this.
  15. Loonm

    Loonm Peon

    Messages:
    744
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #15
    do the background in photoshop:)
     
    Loonm, Feb 23, 2008 IP
  16. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Don't worry, I'm not singling you out here. There's a piece of your comment that I want to reply to, but in the meantime, can we please keep this thread civil? After all, we are all adults here.

    Anyway, I just wanted to comment that the only time I argue with people about how incorrect their techniques are is when the techniques advocated "break the Web" by making a page and/or site inaccessible, hard (or impossible) to use, or breaks in one or more of the four major rendering engines. And when I do, I always provide alternatives that work just as well.

    I understand that this can be a point of frustration right now (for instance, I'm a minimal markup genius, but I suck at design - and I'm stuck trying to design not one, not two, but THREE Web sites at this very moment), but as I said earlier, we're all adults here, so why don't we put the four letter words away before one of the moderators comes along with the proverbial swear jar and starts handing out infractions like candy?
     
    Dan Schulz, Feb 23, 2008 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #17
    We have moderators? :confused:

    Actually, designexpert, do you have a page with what you were talking about? I'm curious to see what it looks like (I can't imagine it very well from text).

    I'll never use Javascript to make a background image, but I'd still like to see it.
     
    Stomme poes, Feb 23, 2008 IP
  18. designexpert

    designexpert Guest

    Messages:
    196
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #18
    you may want to check it out, its really cool :)

    here's the link where you may check out... http://www.web-source.net/html_background_gradient.htm

    here's the code:
    
To use the gradient effect as your web page background, use the following BODY tag: 

<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='[COLOR="Red"]#C0CFE2[/COLOR]', startColorstr='[COLOR="Red"]#FFFFFF[/COLOR]', gradientType='0');"> 

To use the gradient effect within your HTML tables, place the following code within your table tag: 

style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='[COLOR="Red"]#C0CFE2[/COLOR]', startColorstr='[COLOR="Red"]#FFFFFF[/COLOR]', gradientType='0');"
    Code (markup):
    Although you can edit the gradient colors indicated in red, keep in mind, in order for the gradient effect to display properly, you must select one light color and another color that is several shades lighter.

    ----

    now the best solution for even a 1million px height page would be to have that gradient on body and use transparent lines repeat on top....

    however this struck me afterwords, at first the solution i posted was for maybe a 1500px height page at max... [the bg image in that would take around 30-50kb]
     
    designexpert, Feb 23, 2008 IP
  19. designexpert

    designexpert Guest

    Messages:
    196
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #19
    your right... lol not like i care for the guy, but i tried to help a person, now it might not be the best, but then he cannot treat suggestions as if he were paying for the help...
     
    designexpert, Feb 23, 2008 IP
  20. Hades

    Hades Well-Known Member

    Messages:
    1,873
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    150
    #20
    The reason I reacted the way I did, is because in your post where you were trying to help, you sounded like you were boasting. I mean seriously, read your post, and look at how the tone sounds. There were other people who tried to help on here, and some weren't exactly what I was looking for, so I kindly told them that it wasn't what I am looking for, but your reply just pissed me off. i mean, first, you didn't read that I had already done this. Basically you posted a reply to a thread without reading the whole thread (peon moment i assume). But most of all, it was the tone of your reply that got me going and had me write a reply like i did. I thank you for your help, and all that, and don't take this the wrong way, but maybe when you are trying to help someone, don't try to assume that you are an expert. There are still many things all of us could learn, and we shouldn't assume that we are experts on anything, since things constanly change.

    Thank you, and thanks to everyone else who has replied to this.
    Nick
     
    Hades, Feb 23, 2008 IP
Page 1 of 2