I have a gradient blue/black fade I want to use for the background. is there a way to use so it stretches the length of the background with out it ending half way down then starting again? (showing two background images). I want it to look like one continue fade.
Question about background image.
Collapse
X
-
You can have a gradient repeat itself horizontally so that, no matter how wide the user's browser window is, the gradient is the same all the way across. If the gradient is long and skinny, you can make the web page look like it is dark at the top and gets lighter as it goes down the page (or vis-versa). But at the bottom of the gradient, the image isn't repeated, it just stays the same color as the bottom of the gradient - as long as you have set the background color to match the bottom of the gradient's color.
Here is an illustration: http://www.enterprisejm.com/gradient.html
JimIf my post was helpful to you, please take the time to register at my forum and ask a question you've always wanted to know about floors.
www.TheFloorPro.com -
You can have a gradient repeat itself horizontally so that, no matter how wide the user's browser window is, the gradient is the same all the way across. If the gradient is long and skinny, you can make the web page look like it is dark at the top and gets lighter as it goes down the page (or vis-versa). But at the bottom of the gradient, the image isn't repeated, it just stays the same color as the bottom of the gradient - as long as you have set the background color to match the bottom of the gradient's color.
Here is an illustration: http://www.enterprisejm.com/gradient.html
Jim
That is exactly what I am talking about. The page you supplied does not really explain how to do that though?
Well, I did it. I made the image 1x2000 and it still shows as double image when you scroll down. Any idea?Last edited by brettxw; Mon 6 Apr '09, 10:03pm.Comment
-
JimIf my post was helpful to you, please take the time to register at my forum and ask a question you've always wanted to know about floors.
www.TheFloorPro.comComment
-
it looks ok on the main page of www.BlackberryOS.com
but on the forums it shows double images. www.BlackberryOS.com/forums/Comment
-
You didn't set the repeat value for the background, so now it repeats from left to right and keeps repeating to the next rows down the length of the document. This is your CSS:
Code:body { background : #000000 url(http://www.blackberryos.com/forums/images/layout/bgfade1.jpg); color : #ffffff; font : 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; margin : 5px 10px 10px 10px; padding : 0; }
Code:#000000 url(http://www.blackberryos.com/forums/images/layout/bgfade1.jpg)
Code:#000002 url(http://www.blackberryos.com/forums/images/layout/bgfade1.jpg) repeat-x
R'gards,
JimIf my post was helpful to you, please take the time to register at my forum and ask a question you've always wanted to know about floors.
www.TheFloorPro.comComment
-
Jim, thank you SO SO much!! I appreciate your help so much! Thank you again!
You didn't set the repeat value for the background, so now it repeats from left to right and keeps repeating to the next rows down the length of the document. This is your CSS:
Code:body { background : #000000 url(http://www.blackberryos.com/forums/images/layout/bgfade1.jpg); color : #ffffff; font : 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; margin : 5px 10px 10px 10px; padding : 0; }
Code:#000000 url(http://www.blackberryos.com/forums/images/layout/bgfade1.jpg)
Code:#000002 url(http://www.blackberryos.com/forums/images/layout/bgfade1.jpg) repeat-x
R'gards,
JimComment
-
Jim, on the front page it looks perfect!! www.BlackberryOS.com
but when you view the forums www.BlackberryOS.com/forums/
the fade starts really high. Is there a way to fix that or does this have to be done in photoshop?Comment
-
Looks the same on both pages to me. But it makes me wonder why you would have different CSS for those pages. There's no reason I can see to have separate CSS for your forums and for your home page. Is the home page made with vBadvanced CMPS? If so, I know it uses all the same style elements of your forum style.
I also notice that you have a different gradient image - bgfade4.jpg - and it is now only 1px wide. But it doesn't help a heck of a lot more than the original 10px wide gradient because both are HUGE file sizes - 25.28 KB for the original and 23.81 for the new one that is only 1/10th the width. How did you do that? The idea is to make smaller file sizes so your pages load quickly. A graphic of more than 20 KB is way too big, especially if you have a lot of other files and images to download on the page.
R'gards,
JimIf my post was helpful to you, please take the time to register at my forum and ask a question you've always wanted to know about floors.
www.TheFloorPro.comComment
-
Oh. Resizing an image like that only changes the dimensions. The file size isn't affected very much. You should have cropped the original image you made in Photoshop (or resized the layer - whatever they call it - I don't use Photoshop, I use Fireworks) and then optimized it for the web. Or just use the one I gave you, I really don't mind. You made the image, I just edited it to reduce the dimensions and file size.
JimIf my post was helpful to you, please take the time to register at my forum and ask a question you've always wanted to know about floors.
www.TheFloorPro.comComment
-
Put it in and let me see. Something might be wrong with the CSS. The image itself is exactly the same length you made - 2,000px - and the only thing I did was crop your image to 1px wide. Optimizing the file size doesn't change the image itself. I'm up for a few more hours, so go ahead and use it and let's see what it's doing.
JimIf my post was helpful to you, please take the time to register at my forum and ask a question you've always wanted to know about floors.
www.TheFloorPro.comComment
Related Topics
Collapse
-
by CraigI would love to have my site look/behave like http://sedona.vbulletin.net/. The background image stays put while page is scrolled. I also would like to make the area in front of it semi-transparent as...
-
Channel: vBulletin 5 Tutorials
-
Comment