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
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.
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.
I use this site, very handy indeed - stripegenerator.com Is this the sort of thing you were looking for?
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. Yeah, Ijust ended up using a DIV container for a whole wrapper around my site with the stripes. Oh well lol. Thanks, Nick
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
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
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
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
wow .. dude show some respect atleast to someone trying to help you not even to mention that he actually has a very valid solution
Cause you know how every single person in the world has javascript turned on, don't you? 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
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 ....
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?
We have moderators? 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.
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]
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...
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