05-28-2008, 01:14 PM

Hi guys, i went onto this web site last day and i really liked their background.
I had a look at the source and tried to reproduce it on my website but without success...
They basically put this small image that have a gradient (dark to lighter) and repeated -x on their page and you can only see the gradient on the first line of repeat... all the following images are repeated without the gradient and give this nice background...
Anyway when i tried on my website repeat-x it obviously only repeat the image on -x and not al the way to the bottom of the page as i'd like.
And if you do a basic repeat you can see the gradient on each image which doesn;t give the result wanted...

Any ideas on how this need to be done?
I guess there's a bit of Css there as i couldn't find the image path or name on the source...

Many thanks

Remi

05-28-2008, 01:51 PM

Could you link to the website your talking about? I don't think I followed all of that.

05-29-2008, 04:37 AM

Without seeing the site I can't say for certain but i would usually all a background gradient by first making a graient image. If you are going to have the image repeat horizontally make the image 1px wide by however high you need to get the right effect.

Place your gradient image with the rest of your site images. Then edit the CSS for your body tag to include the following:

body {
background-image:url('images/gradientImage);
background-repeat:repeat-x;
}

This will repeat the gradient horizontally no matter how wide the browser window is.

Hope this helps!

05-31-2008, 11:32 AM

Sorry, i think something went wrong and my link dispappear...
The website is: http://torrentfreak.com/

Thanks CircularSaw, but my problem is not how to put an image horizontally, vertically or on the whole page. On this matter, it is with a particular image that they manage somehow to slightly change on the repeat option.
The gradient, as you can see by saving the image, is actually ON the image itself. But even tho they managed to repeat this image on the whole page without re-getting the gradient then after (only on the first line)

If you anyone could tell me how they do that it would be fantastic.


Thanks

06-03-2008, 04:50 AM

Thats pretty simple. Start with the code i gave you bfore (or your own that does the same) Simply create a header div that will contain your heading and give it a background image with the same techniques as used on the body but make the image a .PNG which is a gradient from nothing to a darker colour.

Because PNGs allow alpha channel (trasparencies) when it is overlaid in your body background-image it will look as if it darkens towards the top.

Does this make sense?

06-04-2008, 05:54 AM

Hi CircularSaw, are you saying that they used 2 images?
One in a top header that would have a gradient and then one on the rest of the page without gradient? It make sense, but when you download the source of the website, nothing appear in regards with backgrounds... this is waht led me to believe that they used some sort of css or something...
Thanks
Remi

06-04-2008, 08:17 AM

Yes jjredox, it's one way of doing it and a technique i have used before but XHTML and CSS allow you to be very creative.

I'll have a look at the site after work and see if i can work out how they have done it. Try out my suggested techniques as it requires very little code to achieve and the overhead of having to use a gradient image is tiny.

06-05-2008, 12:00 PM

To Jjredox:

If you downloaded the main page's source the reason you didn't see anything containing to the background of the site is because it was linked to the css:
http://torrentfreak.com/wp-content/t...k_V3/style.css

Now, about the background itself it uses two images one for the header and one for the background itself.

On Line 14 is the background of the whole site and Line 17 is the header's background.

I will help you better if someone already hasn't when I get off of work.

06-06-2008, 06:24 AM

From what Huffman has said the technique being used is exactly the one i described to you. Any other way of doing it is going to be needlessly complex.

Just overlay the gradient on the body background colour.

06-09-2008, 02:43 PM

Absolutely brilliant.
I didn't know the css wasn't being seen when downloading the source.
I will try to get around with the info you guys gave but i might come back if i don't figure it out.

Thanks you so much!!!

06-18-2008, 12:05 AM

just fyi, on ie5 the transparency on .png files does not come up. you might have to use a "clean .gif" or other work around.

06-18-2008, 04:06 AM

IE5 is around 1% of the total market share of browsers being used right now. I usually make my gradients as GIFs but anything else as PNGs as they offer a better quality in image.

If your still using IE5...UPGRADE!!! every other major browser supports PNGs properly.

06-18-2008, 11:38 PM

Originally Posted by CircularSaw

IE5 is around 1% of the total market share of browsers being used right now. I usually make my gradients as GIFs but anything else as PNGs as they offer a better quality in image.

If your still using IE5...UPGRADE!!! every other major browser supports PNGs properly.

ya I totally agree and I do prefer to use png rather than gif....its cleaner and as you said better quality. but there are people out there that do live under a rock and thinks that IE5 is fine and no need to upgrade.

06-19-2008, 04:13 AM

Natakuzen, if only 1% of people drove with one type of fuel and 99% drove using another type of fuel, do you think it is worth supporting that 1%? Of course it's not.

It's not worth trying to support not only IE6/7 Firefox, Safari, Opera etc AND IE5 which does not render anywhere near like the others nor does it support a lot of the newer techniques and technologies.

I would recommend from a professional point of view to aim to support IE6/7, Safari, Opera and Firefox.

Anything else is such a small market % that it's not worth bothering with though.