SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 30 of 30
  1. #26
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <head>
    <title>Test</title>
    <style type="text/css">
    html,body,#bg,#bg table,#bg td{width:100%;height:100%;overflow:hidden}
    img{display:block}

    #bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%}
    #bg td{vertical-align:middle;text-align:center}
    #bg img{min-height:50%;min-width:50%;margin:0 auto}
    </style>
    </head>
    <body>
    <div id="bg"><div>
    <table cellpadding="0" cellspacing="0"><tr><td><img alt="" src="asdsd.jpg" /></td></tr></table>
    </div></div>
    </body>
    </html>

    using this code- how would i put stuff(text/image) on top of the background image now? it puts the background image on top of everything so i can't see anything anymore.

  2. #27
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    give it a z-index of 0 or something
    mmj

  3. #28
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know this thread is old but I ran across it during my extensive research into this problem and thought I would share my results (and solution). There are some easy to use jQuery plug-ins that are what mostly seems to be used to solve this issue. They even handle image distortion by keeping the aspect ratio intact. Here are two examples with the Ajax blender being supported by a commercial enterprise:

    http://johnpatrickgiven.com/jquery/background-resize/

    http://www.ajaxblender.com/bgstretch...nd-plugin.html

    My problem was that I am not using a photograph for my background and to handle both wide-screen and old-screen scenarios these scripts allow a small portion of the image to be cropped at screen edge. Because I am using a geometric design in the background it becomes instantly noticeable if a small portion is missing.

    My solution was to go back to the full CSS solution I had learned about through guides by Stu Nicholls , Chris Coyier & Jennifer Kyrnin and mess around with the CSS and HTML until I got an image in the background of my page that only resized with the height of the page, was centred, and fixed so content would scroll over it. This method of course leaves you with bars on the sides but my geometric image has a solid background that can blend with the pages background colour. If this method can be implemented in your design it has the added advantage of being lightweight, both in the code (no java) and the image size (smaller image blending out to background colour). The following code can be copied and pasted into a blank index.html and just needs the image name updated:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    
    
    <title>Faking a Stretched Background Image - Across the Whole Page</title>
    <meta name="keywords" content="background size, background stretch, 
    stretched background images">
    <meta name="description" content="Use the z-index property to layer your
     content on top of your stretched background image.">
    <style type="text/css">
    body {
        margin:0; padding:0;
    }
    html, body, #bg {
        height:100%;
        width:100%;
    }
    #bg {
        position:fixed; 
        left:0;
        right:0;
        bottom:0;
        top:0;
        overflow:hidden;
        z-index:-99;
    }
    #bg img {
        min-height:100%;
    }
    #content {
        width:200px;
        z-index:1;
    }
    </style>
    </head>
    <body>
    <div align=center> 
       <div id="bg">
          <img style="display:block;" src="your_bg_image.gif">
       </div>
    </div>
    <div id="content">
    //your content here!
    </div>
    </body>
    
    </body></html>
    I have tested this successfully in current Firefox, Safari, and IE8. This failed to centre the image in Opera but it still resizes and justifies left. Would love a fix for Oprea if anyone sees it.

  4. #29
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Found the solution to Opera (and Chrome) and tidied it up for other browsers by using text-align: center;

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    
    
    <title>Faking a Stretched Background Image - Across the Whole Page</title>
    <meta name="keywords" content="background size, background stretch, 
    stretched background images">
    <meta name="description" content="Use the z-index property to layer your
     content on top of your stretched background image.">
    <style type="text/css">
    body {
        margin:0; padding:0;
    }
    html, body, #bg {
        height:100%;
        width:100%;
    }
    #bg {
        position:fixed; 
        left:0;
        right:0;
        bottom:0;
        top:0;
        padding:0;
        overflow:hidden;
        text-align:center;
        z-index:-99;
    }
    #bg img {
        min-height:100%;
    }
    #content {
        width:200px;
        z-index:1;
    }
    
    </style>
    </head>
    <body>
    
    <div id="bg">
       <img src="your_bg_image.gif">
    </div>
    
    <div id="content">
    //your content here!
    </div>
    </body>
    
    </body></html>

  5. #30
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

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