Image Problems

Discussion in 'General Webmaster Support' started by Zedzy, Apr 24, 2008.

  1. Zedzy

    Zedzy ℑΣÐℑΨ

    Ratings:
    +41 / 0 / -0
    Okay, so I decided to have an image using the img tag for a background, because I didn't like my background image repeating, and didn't know how to make it fill the page. When I finished I got this:

    Code:
    <html>
    <head>
    <style type="text/css">
    .rgtbor
    {
    border-right: medium solid #cccccc
    }
    p
    {
    text-indent: 1cm
    }
    .mtable
    {
    margin: 10%;
    background-color: #000000;
    }
    body
    {
    color: #ffffff;
    }
    img.bckg
    {
    position:fixed;
    width: 98%;
    height: 98%;
    top:0%;
    left:0%;
    z-index:-1
    }
    </style>
    </head>
    <body>
    
    <table border="0" cellpadding="10" width="80%" class="mtable">
          <tr>
            <td colspan="2">
              <h1 align="right">
    <u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Page Name</u>
              </h1>
            </td>
          </tr>
          <tr>
            <td width="15%" class="rgtbor" valign="top">
              <h4>
                Navagation
              </h4>
              <ul>
                <li>
                  Page 1
                </li>
                <li>
                  Page 2
                </li>
                <li>
                  Page 3
                </li>
                <li>
                  Page 4
                </li>
                <li>
                  Page 5
                </li>
              </ul>
            </td>
            <td width="65%">
              <h2 align="center">
                Content Heading
              </h2>
              <p>
                All of the content would go here. All of the content would go here.
              </p>
            </td>
          </tr>
        </table>
        <table border="0" cellpadding="10" width="80%" class="mtable">
          <tr>
            <td width="65%">
              <h2 align="center">
                Content Heading
              </h2>
              <p>
                All of the content would go here. All of the content would go here.
              </p>
            </td>
          </tr>
        </table>
    <table border="0" cellpadding="10" width="80%" class="mtable">
          <tr>
            <td width="65%">
              <h2 align="center">
                Content Heading
              </h2>
              <p>
                All of the content would go here. All of the content would go here.
              </p>
            </td>
          </tr>
        </table>
    <img class="bckg" src="http://www.wallpaper.cz/primo/old_ir/warcraft3nightelfs2--c1600xc1200.jpg" width="95" height="84" />
    
    </body>
    </html>
    It worked great in the little box for the Tryit Editor (found here(just copy and paste the code in the little box and click "Edit the text and click me" button)) but when I tried it in firefox there was no image (I even used firefox while using the Tryit Editor). Curious I tried Internet Explorer, there was no background image, but instead the image was at the bottom of the page.

    Why would it work for the Tryit Editor, but not a full browser view? Does it work for you?
     
  2. mase

    mase ____ ___ ____ __

    Ratings:
    +155 / 0 / -0
    Change "position:fixed;" to "position:absolute;"
     
  3. SFilip

    SFilip Gone but not forgotten

    Ratings:
    +634 / 0 / -0
    > Change "position:fixed;" to "position:absolute;"
    I don't think that's how he wants it to look though.

    Changing your body CSS into this will get you the same effect...
    Code:
    body
    {
    color: #ffffff;
    background: url(http://www.wallpaper.cz/primo/old_ir/warcraft3nightelfs2--c1600xc1200.jpg) no-repeat fixed;
    }
    However, the picture you're using is huge - more than 1MB - and this way the background won't appear until it fully loads. I suggest finding a better picture or compressing this one a bit.
    Your solution doesn't work in IE because IE doesn't support position:fixed (until version 7). No idea about Firefox (seems to work in version 3, but not before that).
     
  4. mase

    mase ____ ___ ____ __

    Ratings:
    +155 / 0 / -0
    Don't forget "background-position:top left;"
     
  5. Zedzy

    Zedzy ℑΣÐℑΨ

    Ratings:
    +41 / 0 / -0
    The image is temporary.

    If I do that will the picture fill the entire screen? Also, why did it work in the Tryit editor?

    Edit: How can you make it show the picture for the entire screen?
     
  6. mase

    mase ____ ___ ____ __

    Ratings:
    +155 / 0 / -0
    Well you would need a bigger picture. I suggest you do this:

    Code:
    <style>
    body{
    background-color:#000000;
    background-image:url(http://www.wallpaper.cz/primo/old_ir/warcraft3nightelfs2--c1600xc1200.jpg);
    background-postion:center middle;
    background-attachment:fixed;
    background-repeat:no-repeat;
    }
    </style>
     
  7. Zedzy

    Zedzy ℑΣÐℑΨ

    Ratings:
    +41 / 0 / -0
    Either way the image is cut off, or is in the top right corner.
     
  8. mase

    mase ____ ___ ____ __

    Ratings:
    +155 / 0 / -0
    Do you have a screenshot or something so I can see what is goin wrong for sure?
     
  9. SFilip

    SFilip Gone but not forgotten

    Ratings:
    +634 / 0 / -0
    You're right, seems my method doesn't stretch the picture if it's smaller than the browser window...
    Some googling found me this article on the subject, it's actually the same thing you originally wanted to do, but works with Firefox2. Seems it was a problem with a negative z-index, works if you put the rest of the page (everything except for the img) inside a div tag and then specify z-index:1;position:relative; for it. Also features a workaround for IE, but still won't make it look quite as good as in other browsers.
     
    • Like Like x 1
  10. Zedzy

    Zedzy ℑΣÐℑΨ

    Ratings:
    +41 / 0 / -0
    This is what I have now, it works wonderfully in Firefox but appears at the bottom of the page even though I followed the tutorial. Here's the code:

    Code:
    <html>
    <head>
    <style type="text/css">
    .rgtbor
    {
    border-right: medium solid #cccccc
    }
    p
    {
    text-indent: 1cm
    }
    .mtable
    {
    margin: 10%;
    background-color: #000000;
    }
    body
    {
    color: #ffffff;
    }
    img#bckg
    {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    }
    html, body
    {
    height: 100%;
    margin: 0;
    padding: 0;
    }
    #content
    {
    position:relative;
    z-index:2;
    }
    </style>
    <!--[if IE 6]>
    <style type="text/css">
    html { overflow-y: hidden; }
    body { overflow-y: auto; }
    #bckg { position:absolute; z-index:1; }
    #content { position:static; }
    </style>
    <![endif]-->
    </head>
    <body>
    
    <div id="content"><table border="0" cellpadding="10" width="80%" class="mtable">
          <tr>
            <td colspan="2">
              <h1 align="right">
    <u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Page Name</u>
              </h1>
            </td>
          </tr>
          <tr>
            <td width="15%" class="rgtbor" valign="top">
              <h4>
                Navagation
              </h4>
              <ul>
                <li>
                  Page 1
                </li>
                <li>
                  Page 2
                </li>
                <li>
                  Page 3
                </li>
                <li>
                  Page 4
                </li>
                <li>
                  Page 5
                </li>
              </ul>
            </td>
            <td width="65%">
              <h2 align="center">
                Content Heading
              </h2>
              <p>
                All of the content would go here. All of the content would go here.
              </p>
            </td>
          </tr>
        </table>
        <table border="0" cellpadding="10" width="80%" class="mtable">
          <tr>
            <td width="65%">
              <h2 align="center">
                Content Heading
              </h2>
              <p>
                All of the content would go here. All of the content would go here.
              </p>
            </td>
          </tr>
        </table>
    <table border="0" cellpadding="10" width="80%" class="mtable">
          <tr>
            <td width="65%">
              <h2 align="center">
                Content Heading
              </h2>
              <p>
                All of the content would go here. All of the content would go here.
              </p>
            </td>
          </tr>
        </table></div>
    <img id="bckg" src="http://www.wallpaper.cz/primo/old_ir/warcraft3nightelfs2--c1600xc1200.jpg" width="95" height="84" />
    
    </body>
    </html>
    Thanks for the help so far SFilip +rep.
     
  11. ertaboy356b

    ertaboy356b Old School Gamer

    Ratings:
    +87 / 1 / -0
    if you don't want your background repeat, you might want to add this on the Background CSS: background-repeat: no-repeat;
     
  12. Zedzy

    Zedzy ℑΣÐℑΨ

    Ratings:
    +41 / 0 / -0
    Well the main problem is fixed, I just need it to work in IE.
     
  13. SFilip

    SFilip Gone but not forgotten

    Ratings:
    +634 / 0 / -0
    Finally found a solution thanks to this page.
    Add these two to your img#bckg style (you can remove the IE only part afterwards:
    Code:
    _position:absolute;
    _top:expression(eval(document.body.scrollTop));
    Here's the complete page:
    Code:
    <html>
    <head>
    <style type="text/css">
    .rgtbor
    {
    border-right: medium solid #cccccc
    }
    p
    {
    text-indent: 1cm
    }
    .mtable
    {
    margin: 10%;
    background-color: #000000;
    }
    body
    {
    color: #ffffff;
    }
    img#bckg
    {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    _position:absolute;
    _top:expression(eval(document.body.scrollTop));
    }
    html, body
    {
    height: 100%;
    margin: 0;
    padding: 0;
    }
    #content
    {
    position:relative;
    z-index:2;
    }
    </style>
    </head>
    <body>
    
    <div id="content"><table border="0" cellpadding="10" width="80%" class="mtable">
          <tr>
            <td colspan="2">
              <h1 align="right">
    <u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Page Name</u>
              </h1>
            </td>
          </tr>
          <tr>
            <td width="15%" class="rgtbor" valign="top">
              <h4>
                Navagation
              </h4>
              <ul>
                <li>
                  Page 1
                </li>
                <li>
                  Page 2
                </li>
                <li>
                  Page 3
                </li>
                <li>
                  Page 4
                </li>
                <li>
                  Page 5
                </li>
              </ul>
            </td>
            <td width="65%">
              <h2 align="center">
                Content Heading
              </h2>
              <p>
                All of the content would go here. All of the content would go here.
              </p>
            </td>
          </tr>
        </table>
        <table border="0" cellpadding="10" width="80%" class="mtable">
          <tr>
            <td width="65%">
              <h2 align="center">
                Content Heading
              </h2>
              <p>
                All of the content would go here. All of the content would go here.
              </p>
            </td>
          </tr>
        </table>
    <table border="0" cellpadding="10" width="80%" class="mtable">
          <tr>
            <td width="65%">
              <h2 align="center">
                Content Heading
              </h2>
              <p>
                All of the content would go here. All of the content would go here.
              </p>
            </td>
          </tr>
        </table></div>
    <img id="bckg" src="http://www.wallpaper.cz/primo/old_ir/warcraft3nightelfs2--c1600xc1200.jpg" width="95" height="84" />
    
    </body>
    </html>
    It looks a little jumpy, but still quite nice considering it simulates something IE doesn't really support. If you want to go further, this might make it look smoother, but I didn't try it myself.
     

Share This Page