Probably very simple but how does he do that?

Joined
May 27, 2008
Messages
8
Reaction score
0
Points
1
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
 
Joined
May 23, 2008
Messages
76
Reaction score
4
Points
8
Your Mac's Specs
2.0GHz Aluminium MacBook
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!
 
OP
J
Joined
May 27, 2008
Messages
8
Reaction score
0
Points
1
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
 
Joined
May 23, 2008
Messages
76
Reaction score
4
Points
8
Your Mac's Specs
2.0GHz Aluminium MacBook
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?
 
OP
J
Joined
May 27, 2008
Messages
8
Reaction score
0
Points
1
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
 
Joined
May 23, 2008
Messages
76
Reaction score
4
Points
8
Your Mac's Specs
2.0GHz Aluminium MacBook
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.
 
Joined
Jun 5, 2008
Messages
5
Reaction score
0
Points
1
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/themes/torrentfreak_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.
 
Joined
May 23, 2008
Messages
76
Reaction score
4
Points
8
Your Mac's Specs
2.0GHz Aluminium MacBook
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.
 
OP
J
Joined
May 27, 2008
Messages
8
Reaction score
0
Points
1
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!!!
 
Joined
Oct 10, 2007
Messages
16
Reaction score
0
Points
1
Location
Southern California
Your Mac's Specs
Powerbook G4
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.
 
Joined
May 23, 2008
Messages
76
Reaction score
4
Points
8
Your Mac's Specs
2.0GHz Aluminium MacBook
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.
 
Joined
Oct 10, 2007
Messages
16
Reaction score
0
Points
1
Location
Southern California
Your Mac's Specs
Powerbook G4
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.
 
Joined
May 23, 2008
Messages
76
Reaction score
4
Points
8
Your Mac's Specs
2.0GHz Aluminium MacBook
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.
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top