1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

stretching background

Discussion in 'CSS' started by drew68, Feb 10, 2011.

0
  1. #1
    drew68, Feb 10, 2011 IP
  2. drew68

    drew68 Well-Known Member

    Messages:
    582
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    128
    #2
    the html/css code to stretch a background image i can do...simply by this code alone...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Stretched Background Image</title>
    <style type="text/css">
    /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
    html, body {height:100%; margin:0; padding:0;}
    /* Set the position and dimensions of the background image. */
    #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
    /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
    #content {position:relative; z-index:1; padding:10px;}
    </style>
    <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
    <!--[if IE 6]>
    <style type="text/css">
    html {overflow-y:hidden;}
    body {overflow-y:auto;}
    #page-background {position:absolute; z-index:-1;}
    #content {position:static;padding:10px;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
    <div id="content">
    <h2>Stretch that Background Image!</h2>
    <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
    <p>Go on, try it - resize your browser!</p>
    </div>
    </body>
    </html>



    ....however, i need to place a table above it...

    <table width="1010" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td><img src="images2/spacer.gif" width="1" height="10" /></td>
    </tr>
    <tr>
    <td align="center"><img src="images2/logo.png" width="446" height="101" /></td>
    </tr>
    <tr>
    <td><table width="446" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="185"><img src="images2/love.png" width="185" height="36" /></td>
    <td width="60"><a href="#"><img src="images2/like.png" width="60" height="36" border="0" /></a></td>
    <td width="201"><a href="#"><img src="images2/rumor.png" width="201" height="36" border="0" /></a></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td><table width="100%" border="0" cellspacing="15" cellpadding="15">
    <tr>
    <td align="center"><iframe src="http://player.vimeo.com/video/19590568?title=0&amp;byline=0&amp;portrait=0&amp;color=4a4747&amp;autoplay=1" width="585" height="338" frameborder="0"></iframe></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td><table width="446" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="110"><a href="#"><img src="images2/socialicon1.png" width="110" height="71" border="0" /></a></td>
    <td width="75"><a href="#"><img src="images2/socialicon2.png" width="75" height="71" border="0" /></a></td>
    <td width="91"><a href="#"><img src="images2/socialicon3.png" width="91" height="71" border="0" /></a></td>
    <td width="86"><a href="#"><img src="images2/socialicon4.png" width="86" height="71" border="0" /></a></td>
    <td width="86"><a href="#"><img src="images2/socialicon5.png" width="86" height="71" border="0" /></a></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td><img src="images2/spacer.gif" width="1" height="200" /></td>
    </tr>
    </table>




    any ideas?
     
    drew68, Feb 10, 2011 IP
  3. drew68

    drew68 Well-Known Member

    Messages:
    582
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    128
    #3
    drew68, Feb 10, 2011 IP
  4. drew68

    drew68 Well-Known Member

    Messages:
    582
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    128
    #4
    nevermind fellas...i got it to work! :)
     
    drew68, Feb 10, 2011 IP