gradient background
b3mom
Registered User
13 posts
I would not know html if it was not for all the info that coffee cup has so I am hoping maybe some of you may help me. We did this website...http://gauldinlandscaping.com and would like to put a gradient background behind it using this http://gauldinlandscaping.com/g_bg1.jpg but on my css sheet I have the lines as my background and wondered if there is a way to through this background behind everything. I am being up front when I say I do not have a clue. Thanks in advance for any help.
CoffeeCup Software Rocks!
Registered User
851 posts
You have chosen a relatively difficult thing to do; gradient backgrounds are tricky to implement and while there are various ways of doing it that I am aware of, all have their limitations.
The gradient you propose to use is a compound one, that is, it has gradients in more than one direction. This makes it especially difficult to use as a background. You can, of course, use a single, non-repeating image as your background but this has obvious issues; it would be a relatively large image file to load, slowing rendering down, and in higher screen resolutions it would repeat itself unless you specifically told it not to; either way, it would look awful unless viewed at the exact size you designed it for.
I have seen ultra-complex CSS methods of using several 'staggered' images to achieve a compound gradient background; just Google for ideas and code on how to do this.
The other way (and the method I would be tempted to use) is to have a single direction gradient, like from top to bottom, and use a three or four pixel wide 'strip' of the background image and just repeat it. If you make it long enough, it shouldn't repeat and put a line through your page content unless viewed in extremely high resolution on a large monitor.
All that said, I am no web coder so there could be another method of implementing this that I don't know about. In fact, it is highly likely, but his is my 2 cents worth.
If you are interested I did a mock up of a single gradient background on your page and the resulting image is here:
http://www.pcanytime.co.nz/cap.jpg
As you can see, with these colours certain elements would need some tweaking but it demonstrates the issues in using complex images as a background.
Dave.
The gradient you propose to use is a compound one, that is, it has gradients in more than one direction. This makes it especially difficult to use as a background. You can, of course, use a single, non-repeating image as your background but this has obvious issues; it would be a relatively large image file to load, slowing rendering down, and in higher screen resolutions it would repeat itself unless you specifically told it not to; either way, it would look awful unless viewed at the exact size you designed it for.
I have seen ultra-complex CSS methods of using several 'staggered' images to achieve a compound gradient background; just Google for ideas and code on how to do this.
The other way (and the method I would be tempted to use) is to have a single direction gradient, like from top to bottom, and use a three or four pixel wide 'strip' of the background image and just repeat it. If you make it long enough, it shouldn't repeat and put a line through your page content unless viewed in extremely high resolution on a large monitor.
All that said, I am no web coder so there could be another method of implementing this that I don't know about. In fact, it is highly likely, but his is my 2 cents worth.
If you are interested I did a mock up of a single gradient background on your page and the resulting image is here:
http://www.pcanytime.co.nz/cap.jpg
As you can see, with these colours certain elements would need some tweaking but it demonstrates the issues in using complex images as a background.
Dave.
b3mom
Registered User
13 posts
Thank you for taking so much time to reply and breaking everything down so simple for me!!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
