Results 1 to 14 of 14
  1. #1


    Member Since
    May 27, 2008
    Posts
    8
    Unhappy Probably very simple but how does he do that?
    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

  2. #2


    Member Since
    Mar 04, 2008
    Posts
    477
    Could you link to the website your talking about? I don't think I followed all of that.

  3. #3


    Member Since
    May 23, 2008
    Posts
    76
    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!

  4. #4


    Member Since
    May 27, 2008
    Posts
    8
    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

  5. #5


    Member Since
    May 23, 2008
    Posts
    76
    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?

  6. #6


    Member Since
    May 27, 2008
    Posts
    8
    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

  7. #7


    Member Since
    May 23, 2008
    Posts
    76
    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.
    Web Designer
    Microsoft Web Developer
    MacBook Owner

  8. #8


    Member Since
    Jun 05, 2008
    Posts
    5
    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.

  9. #9


    Member Since
    May 23, 2008
    Posts
    76
    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.
    Web Designer
    Microsoft Web Developer
    MacBook Owner

  10. #10


    Member Since
    May 27, 2008
    Posts
    8
    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!!!

  11. #11

    natakuzen's Avatar
    Member Since
    Oct 10, 2007
    Location
    Southern California
    Posts
    16
    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.

  12. #12


    Member Since
    May 23, 2008
    Posts
    76
    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.
    Web Designer
    Microsoft Web Developer
    MacBook Owner

  13. #13

    natakuzen's Avatar
    Member Since
    Oct 10, 2007
    Location
    Southern California
    Posts
    16
    Specs:
    Powerbook G4
    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.

  14. #14


    Member Since
    May 23, 2008
    Posts
    76
    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.
    Web Designer
    Microsoft Web Developer
    MacBook Owner

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Is there a simple way to convert?
    By Murdock in forum Music, Audio, and Podcasting
    Replies: 2
    Last Post: 03-26-2012, 12:08 AM
  2. Simple Question >>
    By Snowleopard in forum OS X - Operating System
    Replies: 5
    Last Post: 12-27-2011, 05:13 PM
  3. Simple, Simple question (?) from a real beginner
    By JamesTaylor in forum iOS and Apps
    Replies: 0
    Last Post: 05-15-2011, 08:58 AM
  4. A simple one
    By pothypine in forum Switcher Hangout
    Replies: 8
    Last Post: 03-03-2011, 12:31 PM
  5. Simple Programming
    By stedg in forum OS X - Development and Darwin
    Replies: 9
    Last Post: 05-22-2007, 04:16 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •