Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centerd div not staying put in Opera

    I have a full page height fixed (no scroll) background image in my design that I wanted stretched to window height but not width and centred because the image is narrow and blends with the background colour. I played with the CSS solution from tutorials by Stu Nicholls , Chris Coyier & Jennifer Kyrnin and came up with a solution that works in Firefox, Safari, & IE8 but not in Opera. In Opera it does everything but centre.

    I am hoping another set of eyes might see a solution.

    I have included a full sample document that is tested to work/fail and can be tested as an index.htm if you assign an image and some content to test the scrolling.

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

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try

    text-align:center;

    in the bg div.

    Frank
    Last edited by effpeetee; 06-01-2010 at 01:48 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    text-align:center;
    No joy. I also added chrome to the list of browsers not liking this. Same reaction as in Opera, no centring but resizing is good.
    Last edited by Gaillen; 06-02-2010 at 01:49 AM. Reason: fix quote

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Solved!

    oops! looks like I spoke too soon. Some of the other css must have been causing conflicts because after a bunch of cleaning effpeetee's text-align:center; worked. Thank you effpeetee

    Cleaned up the extra dive and redundant mark up and css. Here is the final code working in current Firefox, Safari, IE8, Opera, Chrome.

    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>
    Also based on effpeetee's tip I found this tutorial explaining the image centring issues including depreciated concepts. Apparently a big chunk of my brain has been depreciated

    http://www.netmechanic.com/news/vol7/html_no10.htm


  •  

    Tags for this Thread

    Posting Permissions

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