New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

 
Start a Discussion
 

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

Probably very simple but how does he do that?


Post Reply New Thread Subscribe

 
Thread Tools
jjredox

 
Member Since: May 27, 2008
Posts: 8
jjredox is on a distinguished road

jjredox is offline
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
QUOTE Thanks
AlyciaAnimation

 
Member Since: Mar 04, 2008
Posts: 477
AlyciaAnimation has a spectacular aura about

AlyciaAnimation is offline
Could you link to the website your talking about? I don't think I followed all of that.
QUOTE Thanks
CircularSaw

 
Member Since: May 23, 2008
Posts: 76
CircularSaw will become famous soon enough
Mac Specs: 2.0GHz Aluminium MacBook

CircularSaw is offline
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!
QUOTE Thanks
jjredox

 
Member Since: May 27, 2008
Posts: 8
jjredox is on a distinguished road

jjredox is offline
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
QUOTE Thanks
CircularSaw

 
Member Since: May 23, 2008
Posts: 76
CircularSaw will become famous soon enough
Mac Specs: 2.0GHz Aluminium MacBook

CircularSaw is offline
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?
QUOTE Thanks
jjredox

 
Member Since: May 27, 2008
Posts: 8
jjredox is on a distinguished road

jjredox is offline
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
QUOTE Thanks
CircularSaw

 
Member Since: May 23, 2008
Posts: 76
CircularSaw will become famous soon enough
Mac Specs: 2.0GHz Aluminium MacBook

CircularSaw is offline
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.

Web Designer
Microsoft Web Developer
MacBook Owner
QUOTE Thanks
C.Huffman

 
Member Since: Jun 05, 2008
Posts: 5
C.Huffman is on a distinguished road

C.Huffman is offline
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.
QUOTE Thanks
CircularSaw

 
Member Since: May 23, 2008
Posts: 76
CircularSaw will become famous soon enough
Mac Specs: 2.0GHz Aluminium MacBook

CircularSaw is offline
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.

Web Designer
Microsoft Web Developer
MacBook Owner
QUOTE Thanks
jjredox

 
Member Since: May 27, 2008
Posts: 8
jjredox is on a distinguished road

jjredox is offline
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!!!
QUOTE Thanks
natakuzen

 
natakuzen's Avatar
 
Member Since: Oct 10, 2007
Location: Southern California
Posts: 16
natakuzen is on a distinguished road
Mac Specs: Powerbook G4

natakuzen is offline
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.
QUOTE Thanks
CircularSaw

 
Member Since: May 23, 2008
Posts: 76
CircularSaw will become famous soon enough
Mac Specs: 2.0GHz Aluminium MacBook

CircularSaw is offline
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.

Web Designer
Microsoft Web Developer
MacBook Owner
QUOTE Thanks
natakuzen

 
natakuzen's Avatar
 
Member Since: Oct 10, 2007
Location: Southern California
Posts: 16
natakuzen is on a distinguished road
Mac Specs: Powerbook G4

natakuzen is offline
Quote:
Originally Posted by CircularSaw View Post
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.
QUOTE Thanks
CircularSaw

 
Member Since: May 23, 2008
Posts: 76
CircularSaw will become famous soon enough
Mac Specs: 2.0GHz Aluminium MacBook

CircularSaw is offline
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.

Web Designer
Microsoft Web Developer
MacBook Owner
QUOTE Thanks

Post Reply New Thread Subscribe


« new to css - can you check my code? | My new web site. »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread
Thread Starter
Forum
Replies
Last Post
A simple JavaScript calculator mraya Web Design and Hosting 9 02-23-2009 07:16 PM
Playing with pics on my Mac: Simple Questions. Pls help! :) MacNewbie Images, Graphic Design, and Digital Photography 4 10-27-2007 07:36 PM
Simple Pie Chart Creation? Toahine OS X - Apps and Games 3 06-07-2006 07:00 AM
Simple AppleScript request... 570thusaag Running Windows (or anything else) on your Mac 0 02-02-2006 01:33 PM
Simple finder hacking trip OS X - Operating System 0 03-07-2004 11:16 AM

All times are GMT -4. The time now is 06:10 AM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
X

Welcome to Mac-Forums.com

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!


(4 digit year)

Already a member?