Results 1 to 4 of 4

Thread: How is this done ?

  1. #1
    Join Date
    Jul 2006

    How is this done ?

    How do you create the stretched faded out image effect on a site.

    Please see http://www.eskerhills.ie/ for example

    How is the grey image created on the top of the site that stretches across the whole width of the page

  2. #2
    Join Date
    Jun 2003
    I'm going to guess it's a background image.
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  3. #3
    Join Date
    Mar 2006
    Newcastle NSW Australia
    If you right-click on the background and select view image, you will find it is this image - simply a narrow tall gradient image which is then tiled repeat-x on the body background.

  4. #4
    Join Date
    Dec 2005
    American, living in Toronto, ON. CANADA
    I wrote a simple example, this *.html and the attached images:
    <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
    <title> New Document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Generator" content="" />
    <meta name="Author" content="" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <style type="text/css">
    body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
    body {background-image:url('red_gradient.gif')}

    <body style="margin:25px">
    <h1>Red Gradient Background Image</h1>
    <h2>The image used for this background is 8-pixels tall, but 1500-pixels wide!</h2>

    <div style="postion:relative; left:100px; top:250px; width:467px; height:100px; padding:25px 15px; margin-bottom:10px; border:4px dashed blue; background-image:url('blue_gradient.gif') "><h3>And how about this?</h3><p>This DIV uses a background image called "blue_gradient", which is just 8-pixels tall and 500px wide. This DIV is 467px wide (to accomodate internal padding, etc.)</p></div>

    <div style="postion:relative; left:100px; top:250px; width:600px; height:100px; padding:25px 15px; border:4px dashed blue; background-image:url('blue_gradient.gif') "><h3>But OPPS!!</h3><p>This DIV uses same "blue_gradient" image, which is 8-pixels tall and 500px wide, but the DIV is now <strong>600px</strong> wide! So, you start to see the image repeated again at the far right....</p></div>

    <img src="blue_gradient.gif" style="position:relative; top:25px; left:6px;" />
    <p style="margin-top:10px; font-size:1.1em; font-weight:bold; margin-top:35px;">Above: Here is the actual image used for the blue_gradient.<br />
    Notice how it is 'sized'. This is it's normal, non-tiling size.</p>

    <p>By Joel A. Burdick. free to use</p>

    Attached Images Attached Images
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

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

Posting Permissions

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