dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: How is this done ?

  1. #1
    Join Date
    Jul 2006
    Posts
    663

    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
    Location
    here
    Posts
    4,551
    I'm going to guess it's a background image.

  3. #3
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I wrote a simple example, this *.html and the attached images:
    <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <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')}
    </style>
    </head>

    <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>

    </body>
    </html>
    Attached Images Attached Images

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



Recent Articles